1. 程式人生 > >animate.css+wow.js頁面滾動即時顯示動畫

animate.css+wow.js頁面滾動即時顯示動畫

wow github gpo () ati sheet span div mobile

1、地址引入

<link href="css/animate.min.css" rel="stylesheet" type="text/css">
<script src="js/wow.min.js" type="text/javascript"></script>

2、HTML部分

 <div class="animated bounceInRight wow" data-wow-delay="0.4s" style="visibility: visible;animation-delay: 0.4s"></div>

註:bounceInRight為animate.css中的動畫方式,具體可見官方API給出的示例:https://daneden.github.io/animate.css

3、wow.js初始化代碼

<script type="text/javascript">
    new WOW().init();
</script>

註:以下是一些自定義配置:

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

  

animate.css+wow.js頁面滾動即時顯示動畫