scrollReveal.js

scrollRevealは、PC側とモバイル機器に対応したスクロールアニメーションライブラリです.違うのはWOWです.jsのアニメーションは1回しか再生されませんが、scrollReveal.jsのアニメーションは1回または無限回再生できます.

特徴:

scrollRevealはPC側とモバイル側を同時に互換性がある.

0依存(jQueryにもanimate.cssにも依存しない);

はカスタマイズ性が高く、使いやすくて速いです.

使用

1.githubでscrollRevealを検索し、

をダウンロードします.

2.アニメーションライブラリ

のインポート

3.htmlでアニメーション が なラベルにクラス(カスタム)

をバインドする

    
1
    
2
    
3
    
4

4.JAvascriptに フォーマット

を き む

//1.    scrollReveal  
window.sr = ScrollReveal();
//2.  scrollReveal  reveal   scrollReveal      css        
sr.reveal('.test',config);
//   ： html       
//   ：    

5.アニメーション

の

var config = {
        reset: true,   //      ，    (   false             )
        origin: 'right', //        
        duration: 500,   //       
        delay: 0, //   
        rotate: {x:0, y:0, z:0},  //    0     
        opacity: 0.2, //        (0.2 1   )
        scale:2,       //  
        easing: 'ease-in-out', //    //   'ease', 'ease-in-out'，'linear'...
        //     
        //           
        beforeReveal: function(domEl){
            console.log('     ');
        },
        //            
        beforeReset: function(domEl){
            console.log('    ---');
        },
        //          
        afterReveal: function(domEl){
            console.log('     ');
        },
        //          
        afterReset: function(domEl){
            console.log('     ');
        }
    };