Make Your WordPress Site Feel Alive: Add a Scroll-Triggered Animation Step by Step

by

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.

Leave a Comment