嗯 這週本來要來寫BS4的寫法
但..........
這星期的切版直播班學到一個超好用的套件,真的讓我驚訝不已!!!
所以這週就先寫 AOS的筆記吧XDD
AOS是一種視覺滾差的工具套件之一,他是一款蠻好手上的滾動式動畫的資料庫,可以自定所需的效果,是很方便的套件,雖然AOS是用 JS去撰寫的但不會JavaSript的新手也能輕易上手,因為他都幫你寫好了,直接套用就好,超方便der!!!
網址在此:https://michalsnik.github.io/aos/
首先我們需要引入 AOS 網址裡的 CSS及 JavaScript,在 </body>
前加上以下程式碼:
<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>
在 AOS 裡,有分全域設計及單一設計
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 400, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
once: false, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});
<div
data-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>
這裡以單一設計為範例
接著再看到 body 裡面的 html 在想要讓他視覺滾差的效果必須要有 data-aos=”動畫名字”
這是這次作業練習的其中一個部份,出來的結果為:
https://qizhen-lin.github.io/profile/profile.html
我發現我做的視覺滾差超醜的XDDD
不過這不是重點,重點就是 AOS 真的超簡單,讓我不會JS的新手都能不到五分鐘就能寫好視覺滾差XD
發現寫程式越來越好玩了