دیناکالا | فروش آنلاین به سادگی هر چه تمام
نویسنده: ژاکت کد های فاصله گذار برای پس زمینه نارنجی :
selector{ position: absolute; left: -20%; top: 10%; width: 100%; height: 100%; background: #017143; clip-path: circle(596px at left 600px); } @media (max-width:1024px){ selector{ clip-path: circle(380px at left 530px); } } @media (max-width:768px){ selector{ left: 0; clip-path: circle(420px at left 530px); } }
کد های قسمت کانتینر سه عکس پایین:
selector{ position: absolute; right: -10px; bottom:0; width: 200px; transform: translateX(-50%); } selector img{ cursor: pointer; transition: 0.5s; } selector img:hover{ transform: translateY(-15px) } @media (max-width:1024px){ selector{ right: -30%; } } @media (max-width:767px){ selector{ right: -10%; bottom:-4vh } }
کدی که برای هر عکس پایین قسمت ویژگی ها باید بنویسین :
data-jim| (ادرس عکس مورد نظر )
کد ویجت html :
<script type=”text/javascript”>
var $ = jQuery;
$(document).ready(function(){
$(‘[data-jim]’).on(‘click’, function(){
var jim = $(this).attr(‘data-jim’)
$(‘.starbucks img’).attr(‘src’, jim ).attr(‘srcset’, ”)
})
})
</script>
و کلاس css که باید به کانتینر عکس بزرگ بدید :
Starbucks
svgwave.in
