广州网站制作公司

网站制作8年,客户1300+



wow.js+animate.css制作CSS3动画

2017-12-01


之前我介绍了一个CSS3动画效果的文章,见http://www.tbadc.com/coding/349.html,今天我为大家介绍另一个也非常不错的动画JS,wow.js


wow.js演示地址

wow.js的github地址

 

使用方法真是超简单~~

1、需要配合Animated.css使用,首先要加载animate.css动画库


<link rel="stylesheet" href="css/animate.min.css">


2、加载jquery和wow.js

<script TYPE="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script TYPE="text/javascript" src="js/wow.min.js"></script>


3、在html标签组合动画,在需要用到这个效果的元素上面添加class="wow fadeInUp" 和 data-wow-delay=".1s",具体所表示的含义在下图中有说明

wow.js+animate.css制作CSS3动画

下面的data-wow-duration是指动画执行时间。


<div class="wow fadeInUp" data-wow-duration="2s" data-wow-delay="5s"></div>


4.初始化wow.js

 <script>

  wow = new WOW({
        animateClass: 'animated',
      });
      wow.init();

  </script>


0
首页
报价
关于
联系