Parallax Photo Carousel | parallax effect animation Using Photo Carousel

Parallax Photo Carousel | parallax effect animation Using Photo Carousel

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.
output
Parallax Photo Carousel | parallax effect animation Using Photo Carousel
this is blank output( we use html tag )see css output

CSS Code

 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.

output
Parallax Photo Carousel | parallax effect animation Using Photo Carousel

Javascript code 

 //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
Parallax Photo Carousel | parallax effect animation Using Photo Carousel


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Parallax Photo Carousel. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

1 Comments

Post a Comment

Previous Post Next Post