Trigger animate.css animation effects when scrolling with wow.js

　　　　I am very happy to have published my first blog essay in 2017/10/14, no matter what you think, I feel that the moment is high up. hahaha, ha grams.

Sometimes the project needs some animation to improve the user experience and draw the user's attention. Wow is a good choice.

Wow.js relies on animate.css, does not need jquery;animate.css is a pure CSS animation

Official website:http://mynameismatthieu.com/WOW/

Suggest go to the official website a look

Bootstrap CDN Service:http://www.bootcdn.cn/wow/

The animation is displayed when you scroll. very animate.css friend:-)
Easily customize animation settings: style, delay, length, offset, iteration ...

:Https://github.com/matthieua/WOW

Steps to use:

1. Introduction of ANIMATE.CSS

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

2. Introduction of Wow.js

<script src= "Js/wow.min.js" type= "Text/javascript" charset= "Utf-8" ></script>

3. Start new WOW (). Init ();

<script type= "Text/javascript" >
New WOW (). Init ();
</script>

4. Add Class on the label that requires animation Note: Wow must precede the animation class name

<div class= "Wow Bounce" >
<p> fully fit with 0 basic learners </p>
<p> fully fit with 0 basic learners </p>
</div>

* Animation effect display site: https://daneden.github.io/animate.css/

5. Advanced Options Note: For better control of animation effects (properties)

<div class= "Wow Bounce" data-wow-delay= "1.5s" data-wow-iteration: "1" >
<p> fully fit with 0 basic learners </p>
<p> fully fit with 0 basic learners </p>
</div>

data-wow-duration: Change the duration of an animation
Data-wow-delay: delay before the animation starts
Data-wow-offset: Distance to start animation (related to the bottom of the browser)
data-wow-iteration: The number of animations repeats (infinite times: infinite)

The above can be animated, but there is a problem, these animations will load the page when a brain trigger, we often want to scroll here to start the trigger.

We can use custom configurations.

Boxclass: displays the class name of the hidden box when the user scrolls.

Animateclass: The class name that triggers the CSS animation (Animate.css Cuomo thinks "animated")

Offset Amount: defines the distance between the bottom of the browser viewport and the top of the hidden box.
When the user scrolls and reaches this distance, the hidden box is displayed.

Mobile: turn wow.js on/off on the mobile device.

Live: automatically checks for new WOW elements on the page.

This is the JS code:

var wow = new Wow ({
Boxclass: ' Wow ',
Animateclass: ' Animated ',
offset:0,
Mobile:true,
Live:true
});
Wow.init ();

Configuration

Some websites use full-screen scrolling fullpage plug-in and Wow combination method, the effect is more cool. We can write it completely.

But using Fullpage.js, wow.js invalid failure, no action .

The problem is that the fullpage hides the scroll bar, the scroll bar is turned on, the scrollbar is set to True, the code is as follows
$ (' #fullpage '). Fullpage ({
Scrollbar:true;
});
Finally, using CSS to hide the scroll bar, add HTML Overflowhidden, the code is as follows
html{

Overflow:hidden;

}

The first essay will be here, see you next time.

Trigger animate.css animation effects when scrolling with wow.js