<div id="q0ue2"></div>
  • <table id="q0ue2"></table>
  • <wbr id="q0ue2"></wbr>
    <div id="q0ue2"><acronym id="q0ue2"></acronym></div>
  • 咨詢電話:
    15628812133
    22
    2023/12

    利用ScrollReveal.js的HTML屬性實現網頁動畫

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

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

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

    引入ScrollReveal.js庫

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


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

    1.enter動畫起始方向

    值: top | right | bottom | left

    2.move動畫執行距離

    值: 數字,以 px 為單位

    3.over動畫持續時間

    值: 數字,以秒為單位

    4.after/wait 動畫延遲時間

    值: 數字,以秒為單位


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

    from the and then but with ,

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

    具體使用

    關鍵詞:
    返回列表
    国产办公室秘书无码精品_AV无码天堂AV_A级毛片无码专区免费看
    <div id="q0ue2"></div>
  • <table id="q0ue2"></table>
  • <wbr id="q0ue2"></wbr>
    <div id="q0ue2"><acronym id="q0ue2"></acronym></div>