# 20220608-套件(粒子效果、AOS、WOW) ###### tags: `上課` `css` ## 粒子效果 https://vincentgarreau.com/particles.js/ 1. 更改要得校過後 => 下載最後變得Json黨 & 中間下載Download 2. 解壓縮 => * 增加一個 js資料夾與 particles.js-master 同層 * 複製 particles.js-master 裡的 particles.min.js 到Js資料夾 * 複製 particles.js-master > Demo 裡的 app.js到Js資料夾 * Index.html ``` <style> body{ background: black; } </style> <body> <div id="particles-js"></div> <script src="./js/particles.min.js"></script> <script src="./js/partical_app.js"></script> ``` ``` ![](https://i.imgur.com/JKxQx7j.png) 3. particles-config.json 全部複製到 particles_app.js(如圖下) ![](https://i.imgur.com/TyfezDE.png) ![](https://i.imgur.com/LjQUbqf.png) * 動畫效果蓋到下方元素，~~~ ## AOS https://michalsnik.github.io/aos/ 1. download > 解壓縮 > 增加2的資料夾 CSS &js 2. 複製aos-master >dist 裡的檔案分別放入2資料夾 3. 基本架設 link CSS檔 & src JS檔 ``` <title>Document</title> <!-- AOS 的 CSS --> <link rel="stylesheet" href="./css/aos.css"> </head> <body> <!-- AOS的主程式 js --> <script src="./js/aos.js"></script> <script> AOS.init() </script> </body> ``` [內容參考]https://github.com/michalsnik/aos) Animations Fade animations: fade fade-up fade-down fade-left fade-right fade-up-right fade-up-left fade-down-right fade-down-left Flip animations: flip-up flip-down flip-left flip-right Slide animations: slide-up slide-down slide-left slide-right Zoom animations: 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 Anchor placements: top-bottom top-center top-top center-bottom center-center center-top bottom-bottom bottom-center bottom-top <!-- data-aos-easing --> Easing functions: 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 * data-aos 動畫樣式 * data-aos-duration 動畫持續時間(豪秒) 0~3000 * data-aos-delay 延遲幾秒撥放動畫 0~3000 * data-aos-offset 設定視窗底部距離元素相對位移距離開始動畫，預設120px * data-aos-once 進場是否一次 false來回撥放動畫 * 自訂動畫 複製css * ![](https://i.imgur.com/K9GJTcZ.png) * data-aos-easing 動畫速率 ## WOW ## [swiper](http://127.0.0.1:5500/swiper/swiper.html)