Have you ever scrolled a website and felt… nothing?
Let’s fix that. In this guide, I’ll show you how to make your WordPress site breathe—by adding simple scroll-triggered animations using CSS and JavaScript.
It’s easier than you think, and you’ll love the result. Let’s do it together.
What You’ll Need:
- A WordPress site (with a child theme or access to theme files)
- Basic understanding of HTML/CSS
- A little courage ❤️
Step 1: Add the Animation Styles
Edit your child theme’s style.css file and add:
@keyframes fade-in-up {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.scroll-animate {
opacity: 0;
animation: fade-in-up 0.6s ease-out forwards;
}
Step 2: Inject Scroll Detection
Now open your footer.php or enqueue a custom JS file and add:
<script>
document.addEventListener("DOMContentLoaded", function () {
const elements = document.querySelectorAll(".scroll-animate");
function handleScroll() {
elements.forEach(el => {
const rect = el.getBoundingClientRect();
if (rect.top < window.innerHeight - 50) {
el.style.animationDelay = "0.2s";
el.classList.add("active");
}
});
}
window.addEventListener("scroll", handleScroll);
handleScroll(); // Trigger on page load
});
</script>
Optional: Add a class in CSS to trigger the animation only when .active is added.
.scroll-animate.active {
opacity: 1;
}Step 3: Apply It Where You Want
Now go to your post content or template and wrap elements like this:
<h2 class="scroll-animate">Welcome to Techlino</h2>
<p class="scroll-animate">Let’s make your site move with you!</p>Boom! Scroll and watch the magic.
Tip:
You can play with delay, duration, or even different animations. The feeling you create on your site matters more than you think.
What’s Next?
What part of your site do you want to animate first?
- The navbar?
- Images?
- Maybe even buttons?
Drop a comment or message me—let’s make your site feel alive together.
I’m a software engineer with roots in embedded systems and a growing focus on DevOps and self-hosted infrastructure. CKA certified, CCNA background, and a homelab that never sleeps — running Proxmox, Kubernetes, Docker, Coolify, and more. On techlino.net I share practical guides on Linux, virtualization, and infrastructure built from real experience.