HTML Code
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Responsive Product Slider</title> |
| <link rel="stylesheet" href="style.css"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> |
| |
| </head> |
| <body> |
| <div class="hero"> |
| |
| |
| <div class="container"> |
| <div class="slide"> |
| <div class="img"></div> |
| <div class="img"></div> |
| <div class="img"></div> |
| <div class="img"></div> |
| <div class="img"></div> |
| <div class="img"></div> |
| <div class="img"></div> |
| <div class="img"></div> |
| <div class="img"></div> |
| <div class="img"></div> |
| </div> |
| </div> |
| |
| </div> |
| |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js'></script> |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'> |
| </script><script src="main.js"></script> |
| |
| </body> |
| </html> |
CSS Code | html, |
| body, |
| .hero, |
| .slide, |
| .img { |
| width: 100%; |
| height: 100%; |
| transform-style: preserve-3d; |
| user-select: none; |
| } |
| |
| html, |
| body, |
| .hero { |
| overflow: hidden; |
| background: rgb(202, 52, 52); |
| } |
| |
| div, |
| svg { |
| position: absolute; |
| } |
| |
| .container { |
| perspective: 2000px; |
| width: 300px; |
| height: 400px; |
| left: 50%; |
| top: 50%; |
| transform: translate(-50%, -50%); |
| } |
| |
JavaScript Code | let xPos = 0; |
| |
| gsap.timeline() |
| .set('.slide', { rotationY:180, cursor:'grab' }) |
| .set('.img', { |
| rotateY: (i)=> i*-36, |
| transformOrigin: '50% 50% 500px', |
| z: -500, |
| backgroundImage:(i)=>'url(model2.jpg)', |
| backgroundPosition:(i)=>getBgPos(i), |
| backfaceVisibility:'hidden' |
| }) |
| .from('.img', { |
| duration:1.5, |
| y:485, |
| opacity:0, |
| stagger:0.1, |
| ease:'expo' |
| }) |
| .add(()=>{ |
| $('.img').on('mouseenter', (e)=>{ |
| let current = e.currentTarget; |
| gsap.to('.img', {opacity:(i,t)=>(t==current)? 1:0.5, ease:'power3'}) |
| }) |
| $('.img').on('mouseleave', (e)=>{ |
| gsap.to('.img', {opacity:1, ease:'power2.inOut'}) |
| }) |
| }, '-=0.5') |
| |
| $(window).on('mousedown touchstart', dragStart); |
| $(window).on('mouseup touchend', dragEnd); |
| |
| |
| function dragStart(e){ |
| if (e.touches) e.clientX = e.touches[0].clientX; |
| xPos = Math.round(e.clientX); |
| gsap.set('.slide', {cursor:'grabbing'}) |
| $(window).on('mousemove touchmove', drag); |
| } |
| |
| |
| function drag(e){ |
| if (e.touches) e.clientX = e.touches[0].clientX; |
| |
| gsap.to('.slide', { |
| rotationY: '-=' +( (Math.round(e.clientX)-xPos)%180 ), |
| onUpdate:()=>{ gsap.set('.img', { backgroundPosition:(i)=>getBgPos(i) }) } |
| }); |
| |
| xPos = Math.round(e.clientX); |
| } |
| |
| |
| function dragEnd(e){ |
| $(window).off('mousemove touchmove', drag); |
| gsap.set('.slide', {cursor:'grab'}); |
| } |
| |
| |
| function getBgPos(i){ |
| return ( 100-gsap.utils.wrap(0,360,gsap.getProperty('.slide', 'rotationY')-180-i*36)/360*480)+'px 0px'; |
| } |
Comments