Day35 大俠漢堡

簡單小語

大俠愛吃漢堡包，純正牛肉真是好；香港市民添口福，吃完就是乖寶寶，看到這麼多的漢堡選單樣式，就立刻想到這個標語及經典台詞，這次練習意外發現了AOS的套件，原來滾動滑鼠製造淡入淡出效果是如此的唾手可得，先前看到其他樣式版看到這種都為之膽怯，如今誤打誤撞發現了AOS，簡直發現了新大陸，又能增加許多精彩樣式了，這次挑戰li a .item三個標籤完成漢堡選單的變化，透過:before，:after，box-shadow，transform:rotate()完成許多樣式變化，重拾CSS信心。

筆記分享

1. JavaScript謹記增加(function(){})();保護程式碼的油，保護不被刻意修改。
2. 統一的樣式進行不同的修改且都是利用偽元素修改，樣板則是使用三條白線做各種變化，小魯資質駑鈍部分樣式無法像樣板一樣達成(堅持要靠偽元素)。
3. 定義好li，a，.item所佔據的空間及樣式，比樣板多了一層.item為的是能多一點空間掌握樣式的變化。
4. 掌握box-shadow與.item間的樣式變化及關連性，再利用顏色，角度，距離更改樣式，達到變化效果。
5. 漸漸開始將padding，margin使用%進行推移，增加更多彈性及可塑性。
6. 因為變化大多使用transition進行轉換，所以都會有許多殘影的現象(若大大有更好的CSS煩請推薦給小魯我)。
7. JQuery只用一行代表全部的點擊事件，簡潔有力(其實不會其他更炫炮的功能，淚ing)。
8. 群組式宣告可以簡潔許多程式碼，缺點僅為要修改尋找時必須找一下，但若開發者工具即可以看到吃到的樣式。
9. AOS起手式

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
// AOS JS
  https://unpkg.com/aos@next/dist/aos.js
// AOS tag
    <h1 data-aos="fade-right" data-aos-duration="1000">Hamburger Icon Animations</h1>

10. 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: true, // 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
// 基本的AOS參數設定值：
// offset: 120, // 以像素(px)為單位，水平移動
// delay: 0, //延遲時間，範圍：0~ 3000
// duration: 400, //動畫時間，範圍：0~ 3000
// easing: ‘ease’, // 動畫速率效果
// once: false, // 是否重複觸發動畫
// mirror: false, // 是否超過滾動範圍時，做移出的動畫效果
// anchorPlacement: ‘top - bottom’, // 滾動方向觸發動畫，預設由上到下

參考文章

持續練習

Practice(200901 Day 35)

樣板來源

Hamburger Icon Animations

2020 iT邦幫忙鐵人賽 Day35 網頁前端-持續練習(大俠漢堡)