One minute to make scrolling more fun

Inanimate. CSS, a cross-platform CSS3 animation library, contains a lot of common CSS animations, which can be used to Animate a page in one line of code.

Today, I recommend its cousin, wow.js, a kind of ugly scrolling effect library.

If you go to its website, you can see that the library is very interesting, and the screen is filled with all kinds of dog heads.

The official website is the library’s introduction and demo page, and as you scroll down the page, the dog heads are shown in various animations. In the middle of the dog head, you can see the great features of the library, such as ease of use, pure JS implementation, no reliance on jQuery, rich animation, only 3 KB size, instant display, etc.

Wow.js is based on Animate. CSS, which triggers built-in animation when the page scrolls to a certain point, making the page more lively.

Here’s how to use it. You can learn it in a minute!

How to use

There are many application scenarios of rolling effect, such as you want to do a birthday wish website for a friend, you can play a long paragraph of words, when a friend finishes this paragraph, scroll to the bottom of the page, pop up a birthday cake 🎂, will increase a lot of surprise.

If you do scrolling animation yourself, you have to write JS code to determine whether the page scroll position reaches the location of the element, and then dynamically add the class name, one element is also good, if you want to control more than one, it is more trouble.

If you use wow.js, things are much easier.

It is easy to use by introducing the Animate. CSS on which it depends:

<link rel="stylesheet" href="css/animate.css">
Copy the code

Reintroducing wow.js and initializing an instance, you can still use CDN:

<script src="js/wow.min.js"></script>
<script>
  new WOW().init();
</script>
Copy the code

Next, select the element that you want to animate when scrolling, and give it the Wow class name.

<div>Happy birthday, Abaaba! Omit 1000 words here</div>
<! -- Element you want to add scrolling effect -->
<div class="wow">
  🎂
</div>
Copy the code

Finally, select an effect from the Animate. CSS animation library and add the corresponding class name to the selected element.

For example, if I select the pop-up up action, the corresponding class name is bounceInUp:

<div class="wow bounceInUp">
  🎂
</div>
Copy the code

Then you’re done. The birthday cake is hidden by default until the user scrolls to it and it pops up.

In addition, you can control the duration of the animation, the number of repetitions, the delay, the scroll offset, and so on by adding a class name to the element:

<div class="wow slideInLeft" 
     data-wow-duration="2s" 
     data-wow-delay="5s"
     data-wow-offset="10"  data-wow-iteration="10"
>
  xxx
</div>
Copy the code

You can also add global configuration to all elements when initializing an instance:

wow = new WOW({
  boxClass:     'wow'.animateClass: 'animated'.offset:       0.mobile:       true.live:         true,
})
wow.init();
Copy the code

That’s it for wow. js, if you are interested, you can try it

🔍 Project Address: www.code-nav.cn/rd/?rid=28e…

In the programming navigation can also find more high-quality programming learning resources, welcome to share with the students who need it!