滾動動畫可以為您的網站增添優雅的效果。一點點動畫修飾可以使您的網站看起來全面而完整。使用JavaScript和CSS，可以使元素在向下滾動頁面時淡出，滑動甚至旋轉。
而且，您甚至不必自己編寫所有代碼！多虧了免費的AOS庫，美化您的網站就像添加腳本一樣簡單。只需使用CDN或程序包管理器來安裝JavaScript和CSS文件，然後插入幾行代碼即可。然後，製作動畫將變得輕而易舉。
我們將在此處向您展示如何設置AOS庫，並為您提供一些實用的AOS實驗示例。
設置AOS
如果您使用的是CDN或程序包管理器，它們將為您託管所有文件並正確安裝，那麼將AOS安裝到您的站點是一個簡單的過程。如果您不想這樣做，則需要下載文件並自行設置。
使用包管理器，您要做的就是在安裝它的伺服器的命令行/終端中輸入代碼。npm是一種流行的解決方案，它也自動與Node.js捆綁在一起。只需使用以下命令：
npm install --save aos@next
還有Bower，需要npm。儘管它已被棄用，但仍然可以維護並為許多人所使用。如果已安裝，請啟動以下腳本：
bower install aos --save
最後，還有Yarn，這是Bower的流行替代品。這是您需要的代碼：
yarn add aos@next
如果您更喜歡使用CDN，這些腳本將安裝您需要入門的文件和樣式表。確保同時包含它們兩者，否則將無法正常工作。
CSS腳本：
<link href="域名/aos.css" rel="stylesheet">
JS腳本：
<script src="域名/aos.js"></script>
無論使用哪種方法，最後一步都是使用此代碼初始化AOS並完成設置過程：
<script>AOS.init();</script>
然後，只需創建動畫即可！請查看此動畫控制項表，以及可以使用的這些預定義動畫。由您決定適合您獨特網站的完美效果。如果遇到困難，請嘗試與客服聯繫。
AOS實驗與範例
學習新庫的最好方法是查看運行中的代碼，這就是為什麼CodePen這樣的網站如此有價值的原因。查看下面的代碼片段，您將能夠在輸出旁邊看到正在運行的AOS JavaScript。您甚至可以實時調整代碼。然後，利用您獲得的知識來構建自己的超讚動畫！
模型
AOS Animate On Scroll庫
AOS動畫
AOS錨點
AOS錨點和錨點放置
AOS自定義動畫
滾動示例上的動畫–禁用動畫
AOS JS
影片
滾動效果變得簡單
藉助AOS之類的JavaScript庫，創建具有精美動畫的網站並不是一件容易的事。學習庫的內容可能要花點時間，特別是如果您是初學者，但這會使新的網站開發人員更容易訪問整個過程。這意味著您不必自己重新創建它。
如果您正在尋找一個可以輕鬆實現優雅滾動效果的庫，則絕對可以考慮嘗試AOS。它很容易安裝，甚至更易於學習，因此您可以快速啟動並運行滾動動畫。