aos.js是一款效果超贊的頁面滾動元素動畫jQuery動畫庫插件。該動畫庫可以在頁面滾動時提供28種不同的元素動畫效果，以及多種easing效果。在頁面往回滾動時，元素會恢復到原來的狀態。

安裝

yarn add aos@next

或者

npm install --save aos@next import AOS from 'aos'; import 'aos/dist/aos.css'; AOS.init();

手動添加

文件下載地址：https://download.csdn.net/download/admans/20398230

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script>AOS.init(); </script>

示例

<div aos="fade-zoom-in" aos-offset="200" aos-easing="ease-in-sine" aos-duration="600"> <div aos="flip-left" aos-delay="100" aos-anchor=".example-selector"> <div aos="fade-up" aos-anchor-placement="top-center">

如果你擔心HTML5校驗的問題，可以為上面的屬性添加data-前綴。

<div data-aos="fade-in"></div> <divdata-aos="fade-up"data-aos-offset="200"data-aos-delay="50"data-aos-duration="1000"data-aos-easing="ease-in-out"data-aos-mirror="true"data-aos-once="false"data-aos-anchor-placement="top-center"></div>

參數說明

AOS.init({// 全局設置disable: false, // 禁用條件 'phone', 'tablet', 'mobile', boolean, 表達式 或 函數startEvent: 'DOMContentLoaded', // 初始化的事件名稱initClassName: 'aos-init', animatedClassName: 'aos-animate', useClassNames: false, disableMutationObserver: false, debounceDelay: 50, // 調整窗口大小時為防止抖動延遲時間throttleDelay: 99, // 滾動頁面時 延遲時間offset: 120, // 是立刻觸發動畫還是在指定時間之后觸發動畫delay: 0, // 動畫的延遲時間duration: 400, // 動畫持續時間easing: 'ease', // 動畫的easing動畫效果once: false, // 動畫是否只會觸發一次,或者每次上下滾動都會觸發mirror: false, // 錨元素。使用它的偏移來取代實際元素的偏移來觸發動畫anchorPlacement: 'top-bottom', // 錨位置,觸發動畫時元素位于屏幕的位置});

動畫及效果

Fade 動畫:

• fade
• fade-up
• fade-down
• fade-left
• fade-right
• fade-up-right
• fade-up-left
• fade-down-right
• fade-down-left

Flip 動畫:

• flip-up
• flip-down
• flip-left
• flip-right

Slide 動畫:

• slide-up
• slide-down
• slide-left
• slide-right

Zoom 動畫:

• zoom-in
• zoom-in-up
• zoom-in-down
• zoom-in-left
• zoom-in-right
• zoom-out
• zoom-out-up
• zoom-out-down
• zoom-out-left
• zoom-out-right

錨點位置:

• top-bottom
• top-center
• top-top
• center-bottom
• center-center
• center-top
• bottom-bottom
• bottom-center
• bottom-top

Easing 效果:

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• ease-in-back
• ease-out-back
• ease-in-out-back
• ease-in-sine
• ease-out-sine
• ease-in-out-sine
• ease-in-quad
• ease-out-quad
• ease-in-out-quad
• ease-in-cubic
• ease-out-cubic
• ease-in-out-cubic
• ease-in-quart
• ease-out-quart
• ease-in-out-quart

項目Github地址：https://github.com/michalsnik/aos

總結

以上是生活随笔為你收集整理的CSS3 动画插件 aos.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。