Hey everyone!
I recently worked on a cool feature: on-scroll animations.
These animations make your site more engaging and interactive. I used the Intersection Observer API to achieve this effect, and it was surprisingly easy. Here’s a quick rundown of how I did it.
HTML
First, I set up the HTML structure. I created several sections that would animate into view as the user scrolls. Here’s the code:
<body>
<section class="hidden">
<h1>Hello Folks!</h1>
<p>On scroll code snippet</p>
</section>
<section class="hidden">
<h2>Tech Stack</h2>
<div class="logos">
<div class="logo hidden">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYk594AhSKw5Eb3iHkPHs_XmpCqaRVgu0mvg&s" alt="logo">
</div>
<div class="logo hidden">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_9-dX6ofdk9qorLSVu4R02VV2StVoC1rboA&s" alt="logo">
</div>
<div class="logo hidden">
<img src="https://logodownload.org/wp-content/uploads/2022/04/javascript-logo-1.png" alt="logo">
</div>
<div class="logo hidden">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThGyyY4OZ3bk3rFDaYtAbHR8htxrLHnjw2nxRL_80Xs7F0KG8-4dgIxP-wtQKFhdyXyvQ&usqp=CAU" alt="logo">
</div>
</div>
</section>
<section class="hidden">
<h2>Front End Engineering</h2>
<p>The things you own end up owning you! It's only after you lose everything that you're free to do anything</p>
</section>
</body>
CSS
Next, I wrote some CSS to style the sections. The key was to start with the elements hidden and then animate them into view. Here’s what the CSS looks like:
body {
background-color: #131316;
color: #ffffff;
font-family: 'Poppins', sans-serif;
padding: 0;
margin: 0;
}
section {
display: grid;
place-items: center;
align-content: center;
min-height: 100vh;
}
.hidden {
opacity: 0;
filter: blur(5px);
transform: translateX(-100%);
transition: all 1s;
}
.show {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
.logos {
display: flex;
}
.logo {
margin-left: 2px;
margin-right: 2px;
}
.logo img {
height: 100px;
}
.logo:nth-child(2) {
transition-delay: 200ms;
}
.logo:nth-child(3) {
transition-delay: 400ms;
}
.logo:nth-child(4) {
transition-delay: 600ms;
}
JavaScript for Intersection Observer
The real magic happens with JavaScript. I used the Intersection Observer API to detect when each section comes into view and apply the animation. Here’s the script:
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
});
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));
});
How It Works
HTML
- I created sections with the class hidden which will be animated into view.
CSS
- The .hidden class hides the elements initially using opacity, blur, and transform properties.
- The .show class makes the elements visible by resetting these properties.
JavaScript
- An IntersectionObserver checks if elements are in the viewport.
- When elements come into view, the show class is added to make them visible.
And that’s it! With this setup, as you scroll down the page, the hidden sections will smoothly animate into view. This little touch can really enhance the user experience on your site. I had a lot of fun implementing it, and I hope you do too.
Happy coding!
Also, Check out this Pen I made!
Top comments (0)