動畫插件wow.js的使用

wow.js使用步驟:

1.wow.js插件可以使頁面形成各種各樣的動畫效果。

2.使用步驟:

?wow.js依賴于animate.css,首先需要在head內(nèi)引入animate.css

?再引入wow.js,然后js文件里再寫一行代碼如下:

<script src="js/wow.js"></script>

<script>

? ? ? ? ?wow = new WOW({

? ? ? ? ? ? ? ? ? ? ? ? ? ? animateClass: 'animated',

? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ?wow.init();

</script>

再在元素中添加相應(yīng)的類名 如:

<h1 class="wow animated slidelenLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"?data-wow-iteration="2">我愛前端</h1>

wow是必須要添加的

slideInLeft說明了動畫的樣式,是從左邊滑動出來的

后面的data-wow-duration(動畫持續(xù)時間)、data-wow-delay(動畫延遲時間)、data-wow-offset(元素的位置露出后距離底部多少像素執(zhí)行)和data-wow-iteration(動畫執(zhí)行次數(shù))這四個屬性可選可不選。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,819評論 1 45
  • 框架一 :: Animate.css Animate.css是一個css動畫樣式庫,可以減少我們的開發(fā)時間.它預(yù)設(shè)...
    西巴擼閱讀 3,149評論 0 5
  • 在AngularJS應(yīng)用中創(chuàng)建動畫,有三種途徑: 使用CSS3動畫 使用JavaScript動畫 使用CSS3過渡...
    oWSQo閱讀 1,557評論 0 3
  • 前言: 隨著HTML5規(guī)范的不斷完善,圍繞著這一生態(tài)有很多實用的框架,極大的提高了我們的開發(fā)效率,常見的框架代表有...
    秒簽T閱讀 489評論 0 0
  • 今天不忙 把昨天抬變速箱的車又給處理了處理 油管都給清洗了一下避免里面還有磨子 同樣的水箱也一樣給清洗了一下 把準(zhǔn)...
    京心達(dá)侯天祥閱讀 177評論 0 0

友情鏈接更多精彩內(nèi)容