自我成長

六角學院切版直播班2020秋季Week7

By Jiang 02 December 2020
六角學院切版直播班2020秋季Week7

跟著洧杰老師的腳步終於來到第七週了，這週課程也相對歡樂，相較於 RWD Bootstrap Gulp 是簡單多的 CSS 動畫效果，在 AOS 視差滾動效果裡 background-attachment: fixed 這個語法非常重要，主要是固定背景的方式，來達到視覺滾動的效果，這次的作業練習也有使用到這個語法，另外，第一周到第七週作業完成度也達到70%了，目前對於自己的行動力感到相當滿意，但是對於未來轉職之路還是很迷惘

今天也在slack上詢問了穎旻助教目前前端職缺的看法，覺得稍微有解惑，也相信自己一步一腳印，一定可以達成的！最後一週，準備衝刺囉，六角學院提供了好多獎品啊，一定要拿到！這就六角學院是跟一般仿間補習班不同的差別，六角學院就是這麼有溫度呀！

第七週：視差滾動

  • 在 2020 年，網頁已經擺脫中規中矩排版，我們能藉由簡易的 JS 套件，讓自己的網頁具有動感，設計出具備視差滾動技巧的優美網站！
  • 作品主題：產品介紹網站
  • 教學關鍵字：熱門視差滾動套件、JS 瀏覽器控制

本週訓練菜單

  • 1.1 做當週關卡作業，吸收當週教授觀念
  • 1.3 將本週教授內容寫成 部落格，以加深程式觀念
  • 1.4 自主學習新語法，並寫成筆記 Stretched link
  • 3.2 刻意練習 emmet 與常見英文命名鍵位 emmet

第七週每日任務

補充資料 視差滾動筆記

  • 常用背景圖視差滾動
background-attachment: fixed;
  • 這個 CSS 屬性能夠設定，背景圖片的位置是否要固定在 viewport（視圖）上，還是背景圖片會隨著它的 containing block（外層容器）一起滾動。
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
  1. fixed讓背景相對於 viewport（視圖）的移動是固定的。即便元素中的內容是可滾動的，背景也不會在滾動元素內容時跟著移動。(這個屬性與 background-clip: text 不相容。)
  2. local讓背景相對於元素的內容是固定的，且背景在滾動元素的內容時會跟著移動。另外，背景的繪製與定位區域是相對於元素的可滾動區域，而不是包裹著它們的邊框。
  3. scroll讓背景相對於元素本身是固定的，使背景在滾動元素的內容時不會跟著移動。（It is effectively attached to the element’s border.）

參考來源 MDN background-attachment

助教直播

12/01 助教直播筆記

animation

  1. 基本範例
  2. 移動速率 加上 jQuery
  3. 完整解析 CSS 動畫 ( CSS Animation )
  4. animation-fill-mode a. forwards：停留在最後一個位置 b. backrawds：回到原本位置 c. both 擁有上面兩個的功能
  5. animate css using a CDN 
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
    Basic usage 
    <h1 class="animate__animated animate__bounce">An animated element</h1>
  6. MIT 授權 不能拿掉註解

transform

transform是觸發GPU加速

  1. 文件
  2. 基本範例

opacity

  1. 基本範例

Q:哪些語法，會在網頁上佔據空間 1.opacity 2.transform 3.display:none 4.visibility: hidden;

A:124

Q:哪些語法，不會在網頁上佔據空間 1.opacity 2.transform 3.display:none 4.visibility: hidden;

A:3

aos 滾到特定位置就觸發效果

  1. aos 官網
  2. 基本範例
  3. 第三週同學範例

載入步驟

在 前加上以下程式碼

<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 單一設計

<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>

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

});

once: false, 效果出現就停留 delay: 0, 滾輪滑過去幾秒會出現 offset: 120,滿足大於120px才會出現

  • 學員範例：https://codepen.io/liao/pen/BaovZRg

AOS範例

額外補充

第七週主線任務

第七週 - 視差滾動

作業等級表 Lv2：挑選第一週做的網站，來套用 JS 視差滾動

Github Pages https://viccjiang.github.io/weblayout_1127_hw07/

Github source code https://github.com/viccjiang/weblayout_1127_hw07

第七週版型 切版練習

comments powered by Disqus