<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      18868949445

      武漢官網建設:如何使用免費的AOS庫輕松動畫網頁元素

      日期:2020-03-08 閱讀:291   作者:武漢網站設計開發公司

      滾動動畫可以給你的網站增添相當的效果。一個小的動畫波蘭可以讓你的網站看起來很圓完整。用JavaScript和CSS,你可以讓元素消失,滑動,甚至旋轉,就像你出現的時候一樣。向下滾動一頁

      你甚至不用自己去編碼它!感謝自由圖書館年代美化你的網站就像添加一個腳本一樣簡單。只要使用一個CDN或一個包管理器來安裝JavaScript和CSS文件,并插入幾行代碼,那么制作動畫就很簡單了。

      我們武漢官網建設將向您展示如何在這里設置AOS庫,再加上一些AOS實驗中的一些令人敬畏的例子。

      設置AOS

      如果你使用的是一個CDN或包管理器,安裝AOS到你的站點是一個簡單的過程,它為你提供所有的文件并正確地安裝它們。如果你不想這樣做,你需要下載文件自己動手

      使用包管理器,您需要做的就是將代碼輸入到您安裝的服務器的命令行/終端中。NPM是一種流行的解決方案,它也會自動與Node.js捆綁在一起。

      npm install --save [email protected]

      還有涼亭它需要NPM。雖然它是一個廢棄的工具,但它仍然被許多人使用。如果你安裝了它,啟動這個腳本:

      bower install aos --save

      最后,有這是Bower的一個流行的替代品,這是你需要的代碼:

      yarn add [email protected]

      如果您喜歡使用CDN,這些腳本將安裝您需要啟動的文件和樣式表。請務必將兩者都包含起來,否則將無法正常工作。

      CSS腳本:

      <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

      JS腳本:

      <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

      無論使用哪種方法,最后一步是用這個代碼初始化AOS并完成安裝過程:

      <script>
      AOS.init();
      </script>

      那么這只是一個創建動畫的問題!退房這張桌子動畫控件,以及這些預定義動畫你可以使用。由你來設計適合你獨特網站的完美效果。如果你被卡住了,試試這個。深入教程開發人員寫的。它有很多有用的例子。

      AOS實驗及實例

      學習一個新的圖書館的最好方法是在行動中看到代碼,這就是為什么像科特森這樣的網站是如此有價值的??纯聪旅娴拇a片段,你就可以看到在輸出旁邊的AOS JavaScript了。你甚至可以實時地調整代碼。然后使用你獲得的知識來構建你自己的令人敬畏的動畫。

      模型

      滾動庫上的AOS動畫

      AOS – animations

      錨定

      錨錨定位

      自定義動畫

      動畫實例滾動實例-禁用動畫

      AOS JS

      電影

      滾動效果很容易

      感謝像AOS這樣的JavaScript庫,創建漂亮動畫的網站并不是什么大不了的事。學習圖書館的進進出出可能需要一點時間,尤其是如果你是初學者,但它會讓整個Web開發人員更容易訪問整個過程。這意味著你不必從頭開始創建它。

      武漢官網建設如果你在尋找一個優雅的圖書館滾動效果要實現的微風,一定要考慮AOS。它安裝簡單,甚至更容易學習,所以你可以在滾動動畫上運行并在一個單元中運行。


      网赚团队