久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

22
2023/12

利用ScrollReveal.js的HTML屬性實現(xiàn)網(wǎng)頁動畫

發(fā)布時間:2023-12-22 16:54:49
發(fā)布者:MaiMai
瀏覽量:
0

上一章我們介紹了利用wow和animate來實現(xiàn)滾動加載動畫,本章我們再來介紹同樣能實現(xiàn)該功能的ScrollReveal.js,他不像wow.js一樣需要依賴于animate.css,自己就提供了許多動畫效果,且比較輕量級,加載速度更快。

首先需要引入該庫,可以通過CDN鏈接或者下載庫文件來引入。

引入ScrollReveal.js庫

然后就可以在需要應(yīng)用動畫效果的HTML元素上添加data-scroll-reveal屬性,并在屬性中設(shè)置相應(yīng)的動畫效果配置。


data-scroll-reveal屬性有以下幾個值:

1.enter動畫起始方向

值: top | right | bottom | left

2.move動畫執(zhí)行距離

值: 數(shù)字,以 px 為單位

3.over動畫持續(xù)時間

值: 數(shù)字,以秒為單位

4.after/wait 動畫延遲時間

值: 數(shù)字,以秒為單位


除此之外,還可以在 data-scroll-reveal 屬性里填充(添加)一些類似編程的“語句”,使其更有可讀性:

from the and then but with ,

如下面的兩條代碼都定義了延遲2秒、從底部進入、持續(xù)1秒的動畫效果:

具體使用

關(guān)鍵詞:
返回列表