Table of Contents
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
Now we have completed our javascript section, Here is our updated output with javascript. Hope 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 🙏💕!
In this post, we learn how to create a Parallax Photo Carousel using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
How do you link the css and javascript