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.

 //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 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 🙏💕!

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.

Written by – Code With Random/Anki 

Codepen by – Tom Miller

This Post Has 0 Comments

  1. Unknown

    How do you link the css and javascript

Leave a Reply