溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

WOW.js中怎么實現(xiàn)頁面滾動效果

發(fā)布時間：2021-08-11 14:03:38 來源：億速云 閱讀：147 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)WOW.js中怎么實現(xiàn)頁面滾動效果，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

使用方法

1、引入文件

<link rel="stylesheet" href="css/animate.min.css">

2、HTML

<p class="wow slideInLeft"></p><p class="wow slideInRight"></p>

可以加入 data-wow-duration（動畫持續(xù)時間）和 data-wow-delay（動畫延遲時間）屬性，如：

<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></p><p class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></p>

3、JavaScript

new WOW().init();

如果需要自定義配置，可如下使用：

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

選項配置

屬性/方法    說明    默認(rèn)值

boxClass        需要執(zhí)行動畫的元素的class，字符串        'wow'    animateClass        animation.css 動畫的class，字符串        'animated'    offset        距離可視區(qū)域多少開始執(zhí)行動畫,整數(shù)        0    mobile        是否在移動設(shè)備上執(zhí)行動畫，布爾值        true    live        異步加載的內(nèi)容是否有效，布爾值        true

關(guān)于WOW.js中怎么實現(xiàn)頁面滾動效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手