[Hexschool Web Layout Training] — Week_7 視差滾動

發表於 更新於 分類於 ， ， 文章字數： 3.6k 所需閱讀時間 ≈ 3 分鐘

第七週的練習

Introduction & 前言

你在看網頁時肯定看過東西突然浮出來會是跳出來，在沒有肯定也看過蘋果官網。

這週就是要來學學怎麼實作視差滾動，而且！而且！而且！可以不寫任何一行 JS！

再次提醒一下，本週也是使用 Gulp，如果你還沒用過或是想知道怎麼從 0 開始建立一個 Gulp 歡迎參考我的上一篇文章，[Tool Notes] — 關於Gulp。

Summary & 摘要

*本篇文章將會以三個角度來紀錄， 課程心得(上課後的心得整理)、練習心得(做完作業後的心得整理)) 及 **小組任務(每週會有一項小組任務，寫完後的心得)*。

每週的練習挑戰和地下城有點像，都有自己必須練習到的地方；本週需要練習的目標有至少兩點以上的練習菜單，及額外的一項打字練習。

  1. 語意命名

  2. 幾乎全程使用 emmet 開發

  3. 英打速度 練習

關卡目標

  1. 學會不使用一行 JS 就做出視差滾動

課程心得

本週課程提到了讓網頁互動感提升的方法，沒錯就是動畫。

其實網頁動畫入門並不困難，但是要靈活運用還是要需要一點技巧，把主要要掌握的幾個要點先記起來，後面再慢慢修正就好，但如果你覺得自己手幹太麻煩，其實現在跟大多數好用的套件一樣，也有人幫你包好囉！

手動派

要學會動畫首先要先記得 animation 這個屬性，它就像 Flash 的動畫影格差不多，只是筆者沒學過 Flash 所以這邊不對後者做討論，但其實前者屬性和後者都有個共通點都是使用動畫影格，先讓我們看看下面的範例：

1
<div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div {
    position: absolute;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #42b883;
    animation-name: run;
    animation-duration: 3s;
}

@keyframes run{
    0%{
        transform: translateX(0px);
    }
    100%{
        transform: translateX(100px);
    }
}

仔細看 div 會由左往右跑 3秒 的時間完成，這邊你已經會動畫起手式了！

  1. animation-name 取好動畫名稱

  2. animation-duration 設定動畫完成時間，更多設定下方會提到

  3. @keyframes 帶入你的動畫名稱並設定中途要做什麼改變

這邊也有幾個重要點：

  • @keyframes 裡的 from 到 to 可以改為數字，可以多個區間，比如 0% 15% 35% 50% 100%，但切記數字一定要加上 %

  • 如果沒有 100% 或是 to，網頁會自動幫我們算出結果

  • 後者蓋前者設定，比如兩個相同的 50% 會吃後面的設定，這和 CSS 一模依樣

更多設定

上面有提到除了 animation-name 及 animation-duration 還有更多的設定，在 W3C 的介紹含上面兩個有這幾個：

  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-timing-function
  • animation-direction
  • animation-fill-mode
  • animation-play-state

有興趣可以參考 W3C 的用法介紹，更多詳細動畫這邊就不做介紹，有篇文章這邊狠力推，筆者剛開始學動畫就是參考這篇文章。

自動派

上面有提到雖然我們可以手動設定，但是有許多人會覺得這一堆 @keyframes 超亂的啊！而且我想要一制性、效率性，沒問題這邊就先介紹一個筆者很常使用的套件，而且也是目前全世界最多人使用的動畫套件！

tada!

其實筆者中間有一段時間沒有用，沒發現官網改版了。

如果你只想要你的東西就是單純跑動畫就好，甚至你能不用懂動畫的基礎貨概念，因為開頭就是擺明要教你不寫一行 JS 達到動畫效果了，所以這邊直接上範例：

首先你必須引入 **animate.css**，看你要用 CDN 或是 npm install 都可以，然後前置步驟做完之後，接著在你要使用動畫的地方，加上 Class Name，切記一定要有 animate__animated，接下來再加上 animate__你想家的動畫名稱，後者可以加上你想家的動畫名稱，例如 animate__fadeIn、animate__bounceInDown…等等，是不是很簡單啊。

這個套件其實還能再加上動畫持續幾秒，延遲多久播放，這些其實都可以調整，手幹有的設定套件其實都能在設定，有興趣也可以在詳細參考官方文件。

我全都要？

雖然上方提到有手動設定也有自動設定，但你可能這時候會想：

Ｑ：我加上去動畫就自己開始跑了呀，有時候我想要畫面滑動到特定的地方在播放，我總不可能去算使用者多久滑到那個地方，然後延遲吧？

Ａ：當然是的，所以這時候你就必須全都要了！

哪泥？

雖然上方提到一行 JS 都不用寫，但其實還是至少要寫幾行套件設定啦！(這不算吧

這邊先介紹另一個套件 **AOS.js**，其實這個套件和
animate.css 差不多，引入套件後，在想要加上動畫得元素加上 data-aos="動畫名稱" 就可以了。

但是差別是什麼呢？**AOS.js** 並不會在網頁一載入就跑動畫，而是會偵測你的網頁滑動到該播放動畫的元素那的時候才會播放，這也是為什麼這個套件要多引入一個 .js 檔(雖然提到不用寫任何一行 JS 但是這個套件必須初始化，所以必須在 JS 加上 AOS.init();，僅此一行)。

知道了怎麼用之後，這個套件也可以加上手幹的那些設定，加上的方法也是在想跑動畫的元素上加上 data-aos-offset、data-aos-duration…等等，詳細可參考**官方文件**。

詳細可參考官方指南

這個套件大概的原理就是他會偵測你網頁的視窗底部，在接近你想加上動畫的元素時，會去抓 data 的 attribute，然後把裡面的動畫名稱加上 Class Name 裡。

我全都要

講到這邊你大概就懂了，我全都要是要什麼東西，簡單說就是移到要播放動畫的地方，加上 animate.css 的動畫，這個要怎麼辦到呢？前面有提到 AOS.js 會在畫面移到特定的地方加上 data-attribute 的名稱，那我們把裡面替換成 animate.css 的名稱就可以了，但是設定就必須還是要自己上去改。

關於怎麼合併這邊就直接示範一個範例：

其實 JS 也可以在設定一些諸如視窗距離多少觸發動畫，是否只觸發一次動畫…等等，詳細也可以在參考官方文件設定。

練習心得

其實本週其實可以套用前幾週的版面直接做練習，但因為自己初衷是想練習切版，所以還是切新的版面並且套上套件。

過程其實切版還算順利，只是最後套上套件碰到了個雷，因為套件跑動畫會先卡在邊邊(看得到的狀況，然後再跑動畫進來，所以當下有在 body，下了一個 overflow-x: hidden;，導致全部的動畫都隱藏了，連跑都沒有跑，還好同組的同學 Alex 幫忙發現解決了。

除此之外沒有太大的問題，就繼續往下週邁進了！

原諒這週沒有 RWD 設計稿所以沒有做 RWD

小組任務

任務一：請每個小組討論成員，試著用本週教的視差效果，並套用在自己的版型上，彼此協助除錯，並提交到任務系統上。

Conclusion & 結論

記得在切第一週的版型就有看見同學使用 **AOS.js**，當下覺得挺酷的想等課程結束研究看看，沒想到一直到這週就提到了。一直以來切版常常使用動畫，因為自己覺得動畫對使用者體驗提升許多，但是過多的動畫又會困擾使用者，所以真的要斟酌呢！

在做這週時想到之前 The F2E 也有做過動畫遊戲，雖然當時沒有做完，但是至少還能跑，當時是使用 phaser.js 遊戲引擎(phaser3)，當時關卡主是 Mike，有興趣可以參考他的部落格文章 Phaser.js 的2D遊戲開發入門 part-1 真的挺有趣的，這邊提供一下半完成品。

The F2E 第五週 - NinetyChallengeGame 90秒遊戲 Demo

Demo & 成果程式碼

Source Code：點我

Demo：點我

參考網站