上一章我們介紹了利用wow和animate來(lái)實(shí)現(xiàn)滾動(dòng)加載動(dòng)畫,本章我們?cè)賮?lái)介紹同樣能實(shí)現(xiàn)該功能的ScrollReveal.js,他不像wow.js一樣需要依賴于animate.css,自己就提供了許多動(dòng)畫效果,且比較輕量級(jí),加載速度更快。
首先需要引入該庫(kù),可以通過(guò)CDN鏈接或者下載庫(kù)文件來(lái)引入。
然后就可以在需要應(yīng)用動(dòng)畫效果的HTML元素上添加data-scroll-reveal屬性,并在屬性中設(shè)置相應(yīng)的動(dòng)畫效果配置。
data-scroll-reveal屬性有以下幾個(gè)值:
1.enter動(dòng)畫起始方向
值: top | right | bottom | left
2.move動(dòng)畫執(zhí)行距離
值: 數(shù)字,以 px 為單位
3.over動(dòng)畫持續(xù)時(shí)間
值: 數(shù)字,以秒為單位
4.after/wait 動(dòng)畫延遲時(shí)間
值: 數(shù)字,以秒為單位
除此之外,還可以在 data-scroll-reveal 屬性里填充(添加)一些類似編程的“語(yǔ)句”,使其更有可讀性:
from the and then but with ,
如下面的兩條代碼都定義了延遲2秒、從底部進(jìn)入、持續(xù)1秒的動(dòng)畫效果:
關(guān)鍵詞: