iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 35

Day35 網頁前端-持續練習(大俠漢堡)

Day35 大俠漢堡

https://ithelp.ithome.com.tw/upload/images/20201004/20129161zp4qU9R3Ah.png
https://ithelp.ithome.com.tw/upload/images/20201004/20129161zKHDgZbk3d.png

簡單小語

大俠愛吃漢堡包,純正牛肉真是好;香港市民添口福,吃完就是乖寶寶,看到這麼多的漢堡選單樣式,就立刻想到這個標語及經典台詞,這次練習意外發現了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>
  1. 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 網頁前端-持續練習(大俠漢堡)


上一篇
Day34 網頁前端-持續練習(鈕紐捏捏)
下一篇
Day36 網頁前端-持續練習(風琴萬種)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40

尚未有邦友留言

立即登入留言