scrollReveal.js

and WOW.js equally ,scrollReveal.js Is also a page scrolling animation JavaScript, It makes the page more interesting , More attractive to users . The difference is WOW.js The animation is played only once , and scrollReveal.js Your animation can be played once or indefinitely ;WOW.js rely on animate.css, and scrollReveal.js Do not rely on any other files .

although scrollReveal.js Do not rely on animate.css, But its animation is also used CSS3 Created , So it doesn't support IE10 The following browsers .

The basic method

1、 The introduction of the file

<script src="js/scrollReveal.js"></script>
 Copy code 

2、HTML

<div data-scroll-reveal>dowebok.com</div>
 Copy code 

You must add... To the element data-scroll-reveal attribute , After adding, the default animation effect will be executed , You can also customize the properties to display different animation effects , Such as ：

<div data-scroll-reveal="enter left and move 50px over 1.33s">dowebok.com</div>
<div data-scroll-reveal="enter from the bottom after 1s">Hello world!</div>
<div data-scroll-reveal="wait 2.5s and then ease-in-out 100px">iPhone 6</div>
 Copy code 

3、JavaScript

window.scrollReveal = new scrollReveal();
// perhaps ,elem  Is the parent element of any level of the animation element 
window.scrollReveal2 = new scrollReveal({elem: document.getElementById('srcontainer')});
 Copy code 

data-scroll-reveal attribute

It says you can customize data-scroll-reveal attribute , Let's take a look at the keywords and values of this attribute （ Optional ）.

enter

• explain : Animation start direction
• value : top | right | bottom | left

move

• explain : Animation execution distance
• value : Numbers , With px In units of

over

• explain : Animation duration
• value : Numbers , In seconds

after/wait

• explain : Animation delay time
• value : Numbers , In seconds

fill （ Optional ）

Can be in data-scroll-reveal  Fill in attribute （ add to ） Some programming like “ sentence ”, Make it more readable ,scrollReveal.js Support the following “ sentence ”：

• from
• the
• and
• then
• but
• with
• ,

That is, you can write like this HTML：

<div data-scroll-reveal="wait 0.3s, then enter left and move 40px over 2s">dowebok.com</div>
<div data-scroll-reveal="enter from the left after 0.3s, move 40px, over 2s">Hello world!</div>
<div data-scroll-reveal="enter left move 40px over 2s after 0.3s">iPhone 6</div>
<div data-scroll-reveal="enter left, move 40px, over 2s, wait 0.3s">I love you</div>
 Copy code 

Advanced usage

Custom default value

reset Whether the property always loops

You can change scrollReveal.js Default configuration , Such as ：

var config = {
    after: '0s',
    enter: 'bottom',
    move: '24px',
    over: '0.66s',
    easing: 'ease-in-out',
    viewportFactor: 0.33,
    reset: false,
    init: true
};
window.scrollReveal = new scrollReveal(config);
 Copy code 

dynamic HTML

scrollReveal.init() Method can detect all containing data-scroll-reveal Attribute elements , And initialize , So for dynamically loaded elements , You can do this ：

var config = {
    enter: 'bottom',
    move: '40px',
    over: '0.16s',
    reset: true,
    init: false
};
window.scrollReveal = new scrollReveal(config);
var data = {newElementHtml: '<div data-scroll-reveal>dowebok.com</div>'};
var container = document.getElementById('#container');
container.innerHTML(data.newElementHTML);
scrollReveal.init();
 Copy code 

WOW.js

Some pages scroll down , Some elements produce small animation effects . Although the animation is relatively small , But it gets your attention . For example, just released iPhone 6 The page of （ see ）. If you want your page to be more interesting , Then you can try WOW.js.

WOW.js rely on animate.css, So it supports animate.css As many as 60 A variety of animation effects , Can meet your various needs .

Usage method

1、 The introduction of the file

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

2、HTML

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
 Copy code 

You can join data-wow-duration（ Animation duration ） and data-wow-delay（ Animation delay time ） attribute , Such as ：

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

3、JavaScript

new WOW().init();
 Copy code 

If you need to customize the configuration , It can be used as follows ：

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

To configure

attribute / Method	type	The default value is	explain
boxClass	character string	‘wow’	The elements that need to be animated class
animateClass	character string	‘animated’	animation.css The animation class
offset	Integers	0	How far from the visual area to start the animation
mobile	Boolean value	true	Whether to perform animation on a mobile device
live	Boolean value	true	Whether the content loaded asynchronously is valid