The dust finally settled. A while ago, I was very busy. I got married and worked together because of the marriage leave and annual leave. As a result, I haven't updated my blog for a long time. Today, I took the time to bring you a js special effect. The website module delayed loading animation. I wanted to make this function before the holiday. The page scrolled and loaded, looking very comfortable. It was not finished until today. The tutorial was also found online. I tested many of them, but I still think this one is better. Interested friends can test.

brief introduction

Like WOW.js, scrollReveal.js is also a JavaScript for scrolling animation on the page, which can make the page more interesting and attract users' attention. The difference is that the WOW.js animation can only be played once, while the scrollReveal.js animation can be played once or indefinitely; WOW.js depends on animate.css, while scrollReveal.js does not depend on any other file.

Although scrollReveal.js does not rely on animate.css, its animation is also created with CSS3, so it does not support browsers below IE10.

Browser compatible

IE10+	Chrome	Firefox	Opera	Safari

Older browsers such as IE6 and IE7 do not support CSS3 animation, so they have no effect, and because they do not support some properties or methods, errors will be reported. In order to achieve better compatibility, it is better to add a browser and version judgment.

Basic method

1. Import File

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

2. HTML (directly put "data scroll revert" in the DIV framework)

 <div data-scroll-reveal>talklee.com</div>

You must add the data scroll revert attribute to the element, and then the default animation effect will be executed. You can also customize the attribute 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>

3. JavaScript (add script statement at the bottom of the page)

 <script>     (function(){     window.scrollReveal = new scrollReveal({ reset: false, move: '66px'});     })();     </script>

Data scroll revert attribute

It is said that the data scroll revert attribute can be customized. Now let's take a look at the keywords and values of the attribute (optional).

• enter

Description: Animation start direction

Value: top | right | bottom | left

• move

Description: Animation execution distance

Value: number, in px

• over

Description: Animation duration

Value: number in seconds

• after/wait

Description: Animation delay time

Value: number in seconds

Fill (optional)

You can fill (add) some programming like "statements" in the data scroll revert attribute to make it more readable. ScrollReveal.js supports the following "statements":

• from

• the

• and

• then

• but

• with

• ,

that is You can write HTML like this ：

 <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>

Advanced Usage

Custom Default

You can change the default configuration of scrollReveal.js, 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);

dynamic html

The scrollReveal. init() method can detect and initialize all elements with the data scroll revert attribute, so for dynamically loaded elements, you can do the following:

 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();

Advanced customization can be added later. At present, this site just simply loads animation, and more wonderful special effects will be added later... Come and try it! If you don't like this, you can try wow.js, JS special effect of rolling loading animation on website page (II) 。