Parallax Photo Carousel | parallax effect animation Using Photo Carousel

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Parallax Photo Carousel. We use HTML, Css, and javascript for this Parallax Photo Carousel. Hope you enjoy our blog so let’s start with a basic HTML structure for a Parallax Photo Carousel.

HTML code

 <div class="stage">  
 <div class="container">  
  <div class="ring">  
   <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>  

There is all HTML code for the Parallax Photo Carousel. Now, you can see output without CSS, then we write css & javascript for the  Parallax Photo Carousel.

 html, body, .stage, .ring, .img {  
  width:100%;  
  height: 100%;  
  transform-style: preserve-3d;  
  user-select:none;  
 }  
 html, body, .stage {  
  overflow:hidden;  
  background:#000;  
 }  
 div, svg {  
  position: absolute;  
 }  
 .container {  
  perspective: 2000px;  
  width: 300px;  
  height: 400px;   
  left:50%;  
  top:50%;  
  transform:translate(-50%,-50%);  
 }  

Here is our updated output CSS.

 //https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js

//https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js

let xPos = 0;  
 gsap.timeline()  
   .set('.ring', { rotationY:180, cursor:'grab' }) //set initial rotationY so the parallax jump happens off screen  
   .set('.img', { // apply transform rotations to each image  
    rotateY: (i)=> i*-36,  
    transformOrigin: '50% 50% 500px',  
    z: -500,  
    backgroundImage:(i)=>'url(https://picsum.photos/id/'+(i+32)+'/600/400/)',  
    backgroundPosition:(i)=>getBgPos(i),  
    backfaceVisibility:'hidden'  
   })    
   .from('.img', {  
    duration:1.5,  
    y:200,  
    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('.ring', {cursor:'grabbing'})  
  $(window).on('mousemove touchmove', drag);  
 }  
 function drag(e){  
  if (e.touches) e.clientX = e.touches[0].clientX;    
  gsap.to('.ring', {  
   rotationY: '-=' +( (Math.round(e.clientX)-xPos)%360 ),  
   onUpdate:()=>{ gsap.set('.img', { backgroundPosition:(i)=>getBgPos(i) }) }  
  });  
  xPos = Math.round(e.clientX);  
 }  
 function dragEnd(e){  
  $(window).off('mousemove touchmove', drag);  
  gsap.set('.ring', {cursor:'grab'});  
 }  
 function getBgPos(i){ //returns the background-position string to create parallax movement in each image  
  return ( 100-gsap.utils.wrap(0,360,gsap.getProperty('.ring', 'rotationY')-180-i*36)/360*500 )+'px 0px';  
 }  

Final output