Load Page Elements when Scrolled to that Area

Resources

• Animate.css Library
• WOW.js Library see how to use page

How to Animate things with CSS

In this lesson, we’ll learn a Beautiful Website Effect that animates elements only when the page is scrolled to that element. Easy to implement and interactive for website visitors. You probably have seen so many websites that when you actually visit the website and scroll to any particular area, the animation happens. We will create the same effect with a library called wow.js and animate.css. So let's get started.

HTML Document Structure:
This is how our HTML structure looks like but it really doesn't matter. You can implement this effect on any HTML document.

CSS file

First, we need to import the Animate.css file. The second step is to import the wow.js file. And the third step is to change the class to "wow" on whatever element you want to animate, and also set any kind of animation effect that you want to put. You can select your favorite from the list here.

Step 1: Download Animate.css file

And import it in your project.

Step 2: Download Wow.js file and download the file. You can either get the raw version or the min version. Copy all the code and paste it in a new file and name it wow.min.js and import the file into your HTML document like such

Copy and paste the code, under the script as shown below

<script>
  new WOW().init();
</script>

Step 3: Make an element revealable

Add the CSS class .wow to an HTML element: it will be invisible until the user scrolls to reveal it.

<div class="wow">
  Your content goes here 
</div>

Step 4: Choose the animation style

Pick an animation style in Animate.css, then add the CSS class to the HTML element

<div class="wow bounceIn">
  Your content goes here
</div>

Save it, refresh the screen and the effect will take place. You can further play around with it. I hope you enjoyed this lesson. If you have any question, leave your comments below. I'll talk to you in the next lesson.