码迷,mamicode.com
首页 > Web开发 > 详细

animate.css+wow.js页面滚动即时显示动画

时间:2017-12-21 19:37:59      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:css   visible   src   html   mobile   配置   pos   mat   示例   

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页面滚动即时显示动画

标签:css   visible   src   html   mobile   配置   pos   mat   示例   

原文地址:http://www.cnblogs.com/nerrol/p/8081913.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!