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.
Mohammad Dahamshi is a skilled Embedded Software Engineer and web developer. With experience in C/C++, Linux, WordPress, and DevOps tools, he helps businesses solve technical challenges and build reliable digital solutions. Fluent in Arabic, Hebrew, and English, he also runs Saratec, offering web design and digital marketing services.