前言

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

想法

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

插件的選擇

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

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

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

插件的使用

  "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 去使用這個(gè)項(xiàng)目，所以直接npm 這兩個(gè)插件即可

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

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

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

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

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

以上這個(gè)初始化的配置項(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的綁定，后面那個(gè)animate__fadeInLeft 則是animate.css中選中的動(dòng)畫樣式進(jìn)行綁定 。（我所選中的是從左側(cè)進(jìn)入） 接下來，后面的四個(gè)參數(shù)分別對應(yīng)的意思如下

1、data-wow-duration：更改動(dòng)畫持續(xù)時(shí)間

2、data-wow-delay：動(dòng)畫開始前的延遲

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

4、data-wow-offset：開始動(dòng)畫的距離

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

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

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

最新評論