前言

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

想法

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

插件的選擇

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

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

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

接下來(lái)，我們就是針對(duì)頁(yè)面進(jìn)行操作了

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

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

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

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

對(duì)Dom元素進(jìn)行綁定類(lèi)名

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

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

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

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

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

4、data-wow-offset：開(kāi)始動(dòng)畫(huà)的距離

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

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

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

最新評(píng)論