current position:Home>Two easy-to-use animation JS that make the page move

Two easy-to-use animation JS that make the page move

2021-08-27 12:56:40 78904) sauce:


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 


<div data-scroll-reveal></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"></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 


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


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


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


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


  • 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"></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></div>'};
var container = document.getElementById('#container');
 Copy code 


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 


<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 


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

copyright notice
author[78904) sauce:],Please bring the original link to reprint, thank you.