scrollReveal.js profile:
scrollReveal.js is a js the page scroll animation plug-compatible PC and the mobile terminal. The main function is to scroll when the page within the browser window, add the appropriate visualization into the animation elements.
scrollReveal.js not rely animate.css and Jquery. But it is also with css3 animations created, and therefore does not support ie10 the following browsers.
scrollRever.js official website: https://scrollrevealjs.org/
Browser Compatibility:
ie10+，chrome，Firefox，Opera，Safari
Basic use:
1: Introduction js file:
<script src="./js/scrollReveal.js"></script>2: Adding attribute data-scroll-reveal animation elements need
<div data-scroll-reveal>hello,world!</div>3: initialization and configuration scrollReveal
<script>
window.scrollReveal = new scrollreveal({
//配置选项
});
</script>After successfully completing the above steps to add a scrolling animation elements.
data-scroll-reveal configuration items:
data-scroll-reveal have some alternative configuration properties:
enter：
Description: Sets the start of the animation
Optional value: top | right | bottom | left
move：
Description: set the execution from the animation (also can be unified set at initialization)
value: number, to px units
over：
Description: The duration of the animation
value: number, in s
after：
Description: The animation delay time
value: number, in s
<div data-scroll-reveal="enter left move 50px over 1s after .5s">hello,world！</div>Custom Default:
At initialization scrollReveal we can pass default configuration, all settings data-scroll-reveal the properties of elements on the page if there is no special configuration, will use the default value.
<script>
window.scrollReveal = new scrollReveal({
move:'50px',
enter:'left',
...
})
</script>principle:
In the past and he has written many similar effect, by listening to scroll the page to determine whether the element you want to animate a visual window into the browser, if the element was added into the corresponding css3 animation css. scrollReveal.js too, but this scrollReveal.js better encapsulation process, so that the effect is more easy to complete.