前言

最近接了一個學(xué)校招生網(wǎng)站的需求，很常規(guī)的H5頁面，但是在H5上，需要實(shí)現(xiàn)一些動畫——隨著頁面的滾動，滾動條滾動到某個位置時候，去加載動畫，動畫的樣式隨機(jī)，簡單即可。

想法

當(dāng)時的第一反應(yīng)就是，監(jiān)聽頁面的元素有沒有進(jìn)入可視區(qū)域，如果進(jìn)入可視區(qū)域的話，用一個變量進(jìn)行判斷 ，當(dāng)為true 的時候，則進(jìn)行一個animate 的動畫顯示即可。但是因?yàn)轫撁嫣貏e的長，內(nèi)容也很多，感覺這個方法效率有點(diǎn)低 。于是打找一個適合的插件實(shí)現(xiàn)這個功能。

插件的選擇

各種技術(shù)文章的查詢，找到了一個非常適合的插件。Wow.js 和animate.css的配合使用。

animate.css就不多加贅述了，說白了就是動畫插件，有很多動畫，通過增加類名，就可以實(shí)現(xiàn)動畫。

Wow.js 就是配合animate 去使用。 他又很多配置項(xiàng)，讓我們?nèi)ネ瓿蓚€性化的配置

插件的使用

  "dependencies": {
    "amfe-flexible": "^2.2.1",
    "animate.css": "^4.1.1",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "wow.js": "^1.2.2"
  },

因?yàn)槲沂怯胿ue3+vite 去使用這個項(xiàng)目，所以直接npm 這兩個插件即可

。接著根據(jù)官網(wǎng)的提示，要再main.js 中，引入兩個css 文件

接下來，我們就是針對頁面進(jìn)行操作了

初始化wow.js的配置項(xiàng)

頁面中，我們要先引入wow.js的包，然后在onMounted 中，對wow.js 做一個初始化的配置：

onMounted(() => {
  var wow = new WOW({
    boxClass: 'wow', // 需要執(zhí)行動畫的元素的 class; 【String類型】默認(rèn)值：‘wow'；
    animateClass: 'animated', // animation.css 動畫的 class; 【String類型】默認(rèn)值：‘a(chǎn)nimated'；
    offset: 0, // 距離可視區(qū)域多少開始執(zhí)行動畫；【整數(shù)Number類型】默認(rèn)值：0；
    mobile: true, // 是否在移動設(shè)備上執(zhí)行動畫；【Boolean類型】默認(rèn)值: true;
    live: true // 異步加載的內(nèi)容是否有效；【Boolean類型】默認(rèn)值: true;
  });
  wow.init();
})

以上這個初始化的配置項(xiàng)都是有介紹的，大家可以針對不同的需求，進(jìn)行不同的配置

對Dom元素進(jìn)行綁定類名

   <img src="@/assets/image/pic1/base2.png" class="wow animate__fadeInLeft" data-wow-duration="2s"
        data-wow-delay="2s" data-wow-offset="10" data-wow-iteration="1">

這里面的類名，wow 說白了就是wow.js配置項(xiàng)中的boxClass的綁定，后面那個animate__fadeInLeft 則是animate.css中選中的動畫樣式進(jìn)行綁定 。（我所選中的是從左側(cè)進(jìn)入） 接下來，后面的四個參數(shù)分別對應(yīng)的意思如下

1、data-wow-duration：更改動畫持續(xù)時間

2、data-wow-delay：動畫開始前的延遲

3、data-wow-iteration：動畫的次數(shù)重復(fù)（無數(shù)次：infinite）

4、data-wow-offset：開始動畫的距離

其實(shí)到這一步，這些配置項(xiàng)就已經(jīng)配置完成了。

我們就可以進(jìn)行頁面的滾動動畫了。

以上就是wow.js實(shí)現(xiàn)炫酷的頁面滾動伴隨動畫示例詳解的詳細(xì)內(nèi)容，更多關(guān)于wow.js頁面滾動伴隨動畫的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論