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 🙏💕!
Share on:

0 thoughts on “Parallax Photo Carousel | parallax effect animation Using Photo Carousel”

Leave a Comment