[鼠年全马铁人挑战] Week16 - 超新手学前端 - 爆好用的视觉滚差：AOS

嗯 这週本来要来写BS4的写法
但..........

这星期的切版直播班学到一个超好用的套件，真的让我惊讶不已!!!
所以这週就先写 AOS的笔记吧XDD

AOS 是什么

AOS是一种视觉滚差的工具套件之一，他是一款蛮好手上的滚动式动画的资料库，可以自定所需的效果，是很方便的套件，虽然AOS是用 JS去撰写的但不会JavaSript的新手也能轻易上手，因为他都帮你写好了，直接套用就好，超方便der!!!

网址在此：https://michalsnik.github.io/aos/

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
发现写程式越来越好玩了