Page scrolling effect library, a little skinny

A minute , Make page scrolling more interesting

I just recommended a powerful and easy-to-use cross platform to you some time ago CSS3 Animation library Animate.css, Built in a lot of commonly used CSS Animation , One line of code can make the page move .

Today I would like to recommend his cousin ,WOW.js, A little skinny page scrolling effect Library .

Enter its official website , You know this class library is very interesting , The screen is full of all kinds of dog heads .

The official website is the introduction and demonstration page of the library , When you scroll down the page , Each dog head will be displayed in various animations . In the middle of a dog's head , You can see the excellent features of this library , For example, it is easy to use 、 pure JS Realization 、 Do not rely on jQuery、 Animation is rich 、 Only 3 kb size 、 Instant presentation, etc .

WOW.js be based on Animate.css, When the page scrolls to a certain position , Trigger Animate.css The built-in animation , So as to make the page more vivid .

Here is a demonstration of its usage , You can learn in a minute ！

How to use

There are many scenarios for scrolling effects , For example, you should make a birthday blessing website for your friends , You can type a long paragraph first , When a friend finishes reading this passage , When scrolling to the bottom of the page , Pop up a birthday cake , It will add a lot of surprises .

If you do the scrolling animation by yourself , You're going to write it JS Code to determine whether the page scrolling position reaches the position of the element , Then dynamically add the class name , It's OK to say one element , If you want to control multiple , It's a little bit more complicated .

If you use WOW.js, Everything is much simpler .

It's easy to use , First, introduce the Animate.css：

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

To introduce WOW.js And initialize an instance , Still usable CDN：

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

Next , Select the element that you want to trigger the animation effect when scrolling , Give it a plus wow Class name .

<div>
   happy birthday to you ,abaaba！
   Omit here  1000  word 
</div>
<!--  Elements that want to add a scrolling effect  -->
<div class="wow">
  
</div>

Last , from Animate.css Select an effect in the animation library of , And add the corresponding class name to the selected element .

For example, I choose “ Pop up ” The dynamic effect of , The corresponding class name is bounceInUp：

<div class="wow bounceInUp">
  
</div>

And then it's done , Birthday cake is hidden by default , It will not pop up until the user scrolls to it .

Besides , You can also control the duration of the animation by adding a class name to the element 、 Repeat the number 、 Time delay 、 Roll offset, etc ：

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

You can also initialize the instance , Add global configuration to all elements ：

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

That's all WOW.js I want to share with you , If you are interested, you can have a try ~

Project address ：https://www.code-nav.cn/rd/?rid=28ee4e3e6008319f00473b1a245a2c70

stay Programming navigation We can also find more high-quality programming learning resources , Welcome to share it with the students in need ！