推薦幾款制作網頁滾動動畫的 JavaScript 庫

jopen 9年前發布 | 7K 次閱讀 JavaScript庫

        這里集合了幾款很棒的制作網頁滾動動畫的 JavaScript 庫和插件。它們中,有的可以幫助你在頁面滾動的時候添加動感的元素動畫,有的則是實現目前非常流行的全屏頁面切換動畫。相信借助這些插件,你也可以讓網站變得高大上起來。

ScrollReveal.js

        ScrollReveal.js 用于創建和管理元素進入可視區域時的動畫效果,幫助你的網站增加吸引力。只需要給元素增加 data-scrollreveal 屬性,當元素進入可視區域的時候會自動被觸發設置好的動畫。

 

 推薦幾款制作網頁滾動動畫的 JavaScript 庫

 

在線演示     立即下載

 

ScrollMagic

        ScrollMagic 是一款 jQuery 插件,它讓你可以像使用進度條一樣使用滾動條。如果你想在特定的滾動位置開始一個動畫,并且讓動畫同步滾動條的動作,或者把元素粘在一個特定的滾動位置,那么這款插件正是你需要的。

 

 推薦幾款制作網頁滾動動畫的 JavaScript 庫

 

在線演示      立即下載

 

pagePiling.js

        全屏滾動效果是最近非常流行的網頁設計形式,帶給用戶良好的視覺和交互體驗。pagePiling.js 這款 jQuery 插件可以幫助前端開發人員輕松實現這種效果。支持所有的主流瀏覽器,包括IE8+,支持移動設備。

 

 推薦幾款制作網頁滾動動畫的 JavaScript 庫

 

效果演示     插件下載

 

WOW.js

        在一些網頁上,當你滾動頁面的時候會看到各式各樣的元素動畫效果,非常動感。WOW.js 就是一款幫助你實現這種 CSS 動畫效果的插件,很容易定制,你可以改變動畫設置喜歡的風格、延遲、長度、偏移和迭代等。

 

 推薦幾款制作網頁滾動動畫的 JavaScript 庫

 

立即下載      效果演示

 

ScrollMe

        ScrollMe 是一款 jQuery 插件,用于給網頁添加簡單的滾動效果。當你向下滾動頁面的時候,ScrollMe 可以縮放,旋轉和平移頁面上的元素。它易于設置,不需要任何自定義的 JavaScript 代碼支持。

 

 推薦幾款制作網頁滾動動畫的 JavaScript 庫

 

在線演示      源碼下載   

 

Parallax.js

        Parallax.js 是一個簡單的,輕量級的的視差引擎,能夠對智能設備的方向作出反應。在沒有沒有陀螺儀或運動檢測硬件可用的時候,使用 光標的位置來代替。有很多的行為,你就可以設置為任何給定的視差實例。這些行為既可以通過在標記中指定的數據屬性或通過構造函數 和 JavaScript API 調用。

 

 推薦幾款制作網頁滾動動畫的 JavaScript 庫

 

效果演示      插件下載

本文鏈接:推薦幾款制作漂亮的網頁滾動動畫的 JavaScript 庫

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!