--- tags: 網頁切版直播班 - 2022 夏季班 --- # 第七週 - 視差滾動 * [徵才廠商邀請](https://forms.gle/1DXzRRdfmwo2N4WC8) 9/18(日)成果發表會 * [切版學員報名：專題與求職媒合報名](https://docs.google.com/forms/d/e/1FAIpQLScizdjwsR_lpacdSIG_qGmiBS52AMkxklmbuq_y2r0BjEjMhA/viewform) ## animation 1. [基本範例](https://codepen.io/liao/pen/JjYwNVW?editors=1100) 2. [移動速率](https://codepen.io/liao/pen/gOaZWyj?editors=1100) 3. [完整解析 CSS 動畫 ( CSS Animation )](https://www.oxxostudio.tw/articles/201803/css-animation.html) 4. [animation-fill-mode](https://www.w3cplus.com/css3/understanding-css-animation-fill-mode-property.html) a. forwards：停留在最後一個位置 b. backrawds：回到原本位置 c. both 擁有上面兩個的功能 5. [animate css](https://animate.style/) 6. 本週可以做到的範例：https://goldalles.com/ ## transform 1. [文件](https://www.w3schools.com/cssref/css3_pr_transform.asp) 2. [基本範例](https://codepen.io/liao/pen/VwvqWZQ) ## opacity 1. [基本範例](https://codepen.io/liao/pen/jObXwPN) ## 中場休息 1. 直接 Demo 視差滾動 2. [The F2e 2019](https://challenge.thef2e.com/works)、[2021](https://2021.thef2e.com/)、[臉書社團](https://www.facebook.com/groups/173311386703334) 3. 後續學習方向，皆在下週一截止 * 方案一：有迫切學會技能學員：[JS 直播班，95 折優惠](https://www.notion.so/JS-ac809f0021e443308a2dd8cf710131b2) * 方案二：依照自己步調學習：[3天專屬快閃優惠](https://www.notion.so/React-3-a74b3d7c7aad48c888a2bfc6fb871e34) :::spoiler 2022活動圖 ## 主題：互動式網頁！ ![](https://i.imgur.com/dKybjjm.gif) ### 三大主題，其中一個主題將會使用進階視差滾動 - [紙飲料杯回收](https://recycle.rethinktw.org/trash/5) - [萬波](https://wanpotea.com/) ::: ## aos 1. [aos 官網](https://michalsnik.github.io/aos/) 2. [基本範例](https://codepen.io/liao/pen/PoPXKvm) 3. [第三週同學範例](https://rpg.hexschool.com/task/107/show) ### 載入步驟 在 </body>前加上以下程式碼 ``` <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/aos@2.3.1/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 }); ``` * 學員範例：https://codepen.io/liao/pen/BaovZRg ## AOS範例 * 文章左右偏移：https://codepen.io/bradtraversy/pen/bGbREWg * 組合： https://codepen.io/amctagg1/pen/WVjGKw * 完整範例：https://codepen.io/taohuh/pen/OZmgRV ## 額外補充 * [hover.css](https://ianlunn.github.io/Hover/) * [菁英團](https://courses.hexschool.com/courses/951862/lectures/20753023) ## 第七週主線任務 * <a href="https://rpg.hexschool.com/training/30/task?type=detail&id=305" target="_top">第七週 - 視差滾動</a> **第七週作業，將你之前第一~六週做的網站套用視差滾動即可** ## 第八週設計稿 [NFT 藝術家交易平台](https://xd.adobe.com/view/bcf8f7eb-689c-4850-b531-a78259c0cdd8-e9ab/screen/7a56bb8c-4170-43d3-a265-d00701d1674b/)