Image Stack Animation on Page Scroll

On-scroll animation is a special type of animation that web designers use on websites. In this process, website elements move, fade, or change as a visitor scrolls through a webpage. These animations depend solely on the user's scrolling behavior. However, in this process, a user gets a dynamic and interactive experience while browsing the website. If you want to draw attention to specific content on your website, make long pages more interesting, on-scroll animation can be useful for you. In this blog post, we will share a JavaScript animation snippet about image scroll animation on page scroll. We have included a detailed video about this below. We hope you will take a look at it before collecting the source code.

Video Tutorial:

Image stack animation is a scrolling effect animation where multiple images stack, overlap, or transition as the page is scrolled. This stack animation gives the user the illusion of speed or depth. Developers use libraries like GSAP or ScrollTrigger to achieve this effect. Our snippet today is made entirely of JavaScript. Digital agencies, portfolio sites, fashion brands, tech startups, media companies, or storytelling websites use this type of onscroll and image stack animation. Because it helps them reflect innovation, creativity, grab attention, and add emotional impact to their stories.

You May Also Like:

Image Stack Animation on Page Scroll [ Source Code ]:

To create this Image Stack Animation on Page Scroll, we have to create an HTML file and a CSS file. You can create a separate JS file for the JavaScript code we used here. Make sure to add all the files in HTML file. After that, copy the code from the code box below and paste it into your file. After saving the code, open it in your browser to check if it is working or not. You can also download the code from the download button below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image stack animation on page scroll</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="wrapper">
        <div class="img-area" data-index="0">
            <img src="img/1.jpg" alt="Image 1">
        </div>
        <div class="img-area" data-index="1">
            <img src="img/2.jpg" alt="Image 2">
        </div>
        <div class="img-area" data-index="2">
            <img src="img/3.jpg" alt="Image 3">
        </div>
        <div class="img-area" data-index="3">
            <img src="img/4.jpg" alt="Image 4">
        </div>
    </div>

    <script>
        
const animatedImage = document.querySelectorAll('.img-area');
const maxSpread = 200;
const maxRotate = 35;

function updateStack() {
	const scrollPosition = window.scrollY;
	const windowHeight = window.innerHeight;
	const containerTop = document.querySelector('.wrapper').getBoundingClientRect().top;
	const scrollPercentage = Math.min(Math.max(scrollPosition / (windowHeight * 0.5), 0), 1);
	animatedImage.forEach((item, index) => {
		const spread = scrollPercentage * maxSpread;
		const rotate = scrollPercentage * maxRotate;
		const translateY = spread * (index - (animatedImage.length - 1) / 2);
		const translateZ = -spread * index;
		const rotation = rotate * (index % 2 === 0 ? 1 : -1);
		item.style.transform = `
                    translateY(${translateY}px)
                    translateZ(${translateZ}px)
                    rotate(${rotation}deg)
                `;
		item.style.opacity = 1 - (scrollPercentage * 0.2 * index);
	});
}
animatedImage.forEach((item, index) => {
	item.style.zIndex = animatedImage.length - index;
	item.style.transform = 'translateY(0px) translateZ(0px) rotate(0deg)';
});
updateStack();
window.addEventListener('scroll', updateStack);
window.addEventListener('resize', updateStack);
    </script>
    
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
	min-height: 200vh;
	background: #f0f0f0;
}
.wrapper {
	position: fixed;
	top: 60px;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 800px;
	pointer-events: none;
}
.img-area {
	position: absolute;
	width: 300px;
	height: 200px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	will-change: transform, opacity;
	transition: all 0.5s ease;
	border-radius: 10px;	
}
.img-area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

On scroll and image stack animations add life to any static website. If you want to transform your website into an immersive, story-driven experience, you can use this type of image stack animation on page scroll. However, these types of animations should be used thoughtfully. Because excessive use often leads to annoyance. If they can be used in a balanced way, then the bounce rate of your website will decrease a lot, and engagement will increase further. Hope you have collected the code. To get more such codes, click on the Load More button on our homepage. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Image Stack Animation on Page Scroll [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Image Stack Animation on Page Scroll

Video Tutorial:

Image Stack Animation on Page Scroll [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form