wow.js– make page scrolling more interesting

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

Suggest go to the official website a look

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

Browser compatible

ie10+	Chrome	Firefox	Opera	Safari

IE6, IE7 and other old browsers do not support CSS3 animation, so there is no effect, and wow.js also used the Queryselectorall method, IE lower version will error. In order to achieve better compatibility, it is best to add a browser and version judgment.

1, Wow.js relies on animate.css, first in the head to refer to Animate.css or animate.min.css.

1	<linkrel="stylesheet" type="text/css" href="css/animate.min.css">

2, at the bottom of the reference wow.js or wow.min.js, and then write another line of JavaScript code. (No need to reference jquery)

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

If you need a custom configuration, you can use the following:

var wow = new Wow ({

Boxclass: ' Wow ', Animateclass: ' Animated ', offset:0, Mobile:true, live:true}); Wow.init ();

Configuration

Properties/Methods	type	Default Value	Description
Boxclass	String	' Wow '	The class of the element that needs to perform the animation
Animateclass	String	' Animated '	Animation.css Animation's class
Offset	Integer	0	How much to start the animation from the viewable area
Mobile	Boolean value	True	Whether to perform animations on mobile devices
Live	Boolean value	True	Whether the content that is loaded asynchronously is valid

Note the new Wow (). Init (), in the WOW to capitalize, otherwise there is no effect.

3, in the CSS below JS write the need to animate elements (must be set to block or in-line block!) Must be set to block or inline block! Must be set to block or inline block! ), and add the class name.

<div class= "Wow slideinleft" data-wow-duration= "2s" data-wow-delay= "5s" data-wow-offset= "ten" data-wow-iteration= " Ten "></div>

Wow in front of the class name is all the elements that drive the painting, Slideinleft is the animation style. Data-wow-duration (animation duration), Data-wow-delay (animation delay time), Data-wow-offset (number of pixels after the position of the element is exposed) and data-wow-iteration (number of animation executions) These four properties are optional.

<div class= "Wow Bounce" data-wow-delay= "1.5s" data-wow-iteration: "1" ></div>

data-wow-duration: Changing the duration of an animation
Data-wow-delay: delay before animation starts
Data-wow-offset: The distance to start the animation (related to the bottom of the browser)
data-wow-iteration: Repetition of the number of animations (unlimited times: infinite)

Wow RollIn	From left to right, scroll clockwise, transparency changes from 100% to set value
Wow Bouncein	From the original position, from small to large beyond the set value, and then smaller than the set value, and then return to the setpoint, the transparency from 100% to the set value
Wow Bounceinup	From the bottom up, after jumping up and out of the part then bounce back, the transparency is set to the same value
Wow Bounceindown	From the top down, falling down will go beyond the part then bounce, transparency for the set value unchanged
Wow Bounceinleft	From left to right, after moving over to the right beyond a portion and then to the left to play, the transparency is set to the same value
Wow Bounceinright	From right to left, after moving over to the left and then to the right to bounce, the transparency is set to the same value
Wow Slideinup	From bottom to top, fixed to set position, transparency to set value (up is from bottom to top) (if element is at the bottom, it will open box height)
Wow Slideindown	From top to bottom, fixed to set position, transparency to set value unchanged
Wow Slideinleft	From left to right, fixed to set position, transparency to set value (left to right)
Wow Slideinright	From right to left, fixed to set position, transparency to set value unchanged
Wow Lightspeedin	From right to left, tilt the head to the right, tilt to the left, and finally to the original shape, the transparency changes from 100% to the set value
WOW Pulse	The original position is enlarged a little bit smaller than the original size, the transparency is set to the same value (with the animation execution number of properties effect better)
Wow Flipinx	The original position is backward, the transparency changes from 100% to the setpoint.
Wow Flipiny	Rotation around the original position, the transparency changes from 100% to the set value
Wow Bounce	Up and down jitter, transparency is set to the same value (with animation execution times and animation duration properties can be a sharp jitter or slowly shake)
Wow Shake	Left and right jitter, transparency is set to the same value (with animation execution times and animation duration properties can be a sharp jitter or slowly shake)
Wow Swing	From right to left, tilt the head to the right, tilt to the left, and finally to the original shape, the transparency is set to the same value
Wow Bounceinu	Original position unchanged, direct never display to display (no transition effect)
Wow Wobble	The original position is unchanged, similar to a person standing around the head, the transparency of the set value unchanged

4, in order to write the article specifically tested the Data-wow-offset and data-wow-iteration these two properties, where the value of data-wow-offset= "value" is the animation after the completion of the element distance from the bottom of the display, Rather than the location at the bottom of the browser window.

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;

}

wow.js– make page scrolling more interesting