很多的網站,尤其是一些手機官網或某種產品的官網,都會把自己網站的頁面中一些元素作得美觀起來。比如一些產呂,在打開網頁或網頁下拉到產品圖片的時候,圖片就像活了一樣動起來,很是有趣。

今天介紹一款,讓網頁元素活躍起來的JS插件,WOW.js

此插件必須依賴Animated.css使用

使用方法

引入WOW.js和animate.css

可以從文章最下方提供的GetHub上下載wow.js也可以使用七牛提供的CDN靜態資源庫或其他的CDN靜態資源庫引用wow.js和animate.css文件

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

標記元素

1、在你所要使用樣式的元素的CLASS屬性中加入 wow 以及動畫名稱

2、還可以加可以加入 data-wow-duration(動畫持續時間)和 data-wow-delay(動畫延遲時間)屬性

代碼

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

javascript代碼

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

wow.js的方法屬性

国产视频app關于javascript代碼屬性講解

wow.js

點擊放大

animated.css動畫參數

CLASS類名動畫效果,具體的效果可以查看animated.css演示效果,演示地址在最下方

animate.css

點擊放大

下載&CDN

国产视频appwow.js  GetHub地址:http://github.com/matthieua/WOW

国产视频appwow.js  七牛CDN公共庫: http://cdn.staticfile.org/wow/1.1.2/wow.min.js  

国产视频appanimate.css  七牛CDN公共庫:http://cdn.staticfile.org/animate.css/3.5.2/animate.min.css

animate.css  動畫演示地址:http://daneden.github.io/animate.css/