iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

這個網站也太嗨!30 個網頁動態提案 系列

一個好的動態會讓好的網頁設計,瞬間成為網站界愛馬仕 / 特斯拉!動態網頁比起靜態的網頁,更能完整傳遞網站的故事和訊息,減少網站跳出率、提高點擊率、甚至轉換率。

那客戶想要什麼動態?他們卻是一臉黑人問號。

所以這次鐵人賽,想要搜集網路的案例、教學,(希望可以) 做出 30 個可用的/常見的/很炫的動態提案,並在做中重新爬梳背後的原理和程式邏輯:從最基本的CSS、SVG 動畫到 利用JS、 Canvas 、D3.js 以及 Three.js。

菜鳥工程師也可以很罩地跟客戶說:別擔心,這是我的網頁動態提案!

鐵人鍊成 | 共 33 篇文章 | 20 人訂閱 訂閱系列文 RSS系列文 團隊寫 code 需要講幹話
DAY 10

#番外-讓你的CSS好讀起來!CSS命名方法論筆記

你有以下困擾嗎? 常常不知道要怎麼命名Class嗎?(還一直去 Google 英文字的是你ㄇ ?) 還是常常寫了一個Class樣式後就被另一個Class樣式給...

2021-09-25 ‧ 由 Rachel ? 分享
DAY 10

#9-數字動態好棒棒!(Vanilla JS requestAnimationFrame)

品牌常常會有一些數字想要呈現去說服消費者, 當然只放靜態的數字就太無聊了,最直覺的動態就是讓數字跑起來! 先來看成果: 今天終於來到了JS動態篇章,比賽也進行...

2021-09-25 ‧ 由 Rachel ? 分享
DAY 11

#10-幫網頁加上黑暗模式!日夜開關(CSS變數&Media Query)

這幾年手機、電腦有黑暗模式,很多網頁也加上像電燈一樣的開關啦! 黑暗模式可以降低亮度,減少對眼睛的壓力。弱光環境下比較有可讀性。 我自己是喜歡去網頁一直玩開關(...

2021-09-26 ‧ 由 Rachel ? 分享
DAY 12

#11-下滑動態做起來!(JS: scrollTo & scrollBy)

今天來介紹一下往下滑和往上滑的指引動畫和搭配Web API。 現在都很流行第一屏設計做好做滿, 有時候太美了會讓使用者忘記(/根本不想)往下滑, 適當地指引下滑...

2021-09-27 ‧ 由 Rachel ? 分享
DAY 13

#12-套件掰!用JS 做進場特效 (Intersection Observer API)

進場特效也是基本再基本的網頁動態! 尤其是當網頁內容塞太多時,適當地加上進場特效可以幫助使用者閱讀重點。 以前常用的套件如Scroll Magic, 或計算網頁...

2021-09-28 ‧ 由 Rachel ? 分享
DAY 14

#13-消失吧!Navbar!讓你的網頁更多空間 (JS)

好的Nav bar的動態可以讓網站不那麼呆板, 其實實作的技術也不難,就是偵測頁面的滾動 向下滑的時候再出現 今天實作兩個: 提案 Nav bar的消失...

2021-09-29 ‧ 由 Rachel ? 分享
DAY 15

#14-撒花~Button慶祝動態自己來!~ (JS)

敝人很常踩到詐騙網站,第一屏就是一個慶祝的小動畫, 恭喜我中獎(好想中威力彩啊) 網頁也很常有這種獎勵使用者的小動畫,譬如說送出一個訂單、 或是幫忙寫了一個評價...

2021-09-30 ‧ 由 Rachel ? 分享
DAY 16

#15- 滾起來!頁面動態進度條(JS算網頁長度)

進度條一般都是搭配文章使用, 主要是告訴使用者目前閱讀到哪裡~ 這是我自己非常喜歡的網頁設計, 讓你可以預設自己閱讀的進度,安排自己時間~(太長就快逃啊!) 看...

2021-10-01 ‧ 由 Rachel ? 分享
DAY 17

#16-載入炫起來!水滴狀Loading特效(SVG filter)

Loading動畫不難, 但這次也藉著 Loading 動畫來練習&認識一下SVG的 filter ~ 先來看看成果: 下面先複習一下JS的網頁載入,再看co...

2021-10-02 ‧ 由 Rachel ? 分享
DAY 18

#17-不用套件讓網站Logo動起來~(SVG SMIL)

要讓SVG 動起來,可以使用SMIL:SVG的原生動畫規範, 雖然前幾年Chrome放話不再支援,但這幾年好像暫緩了。 當然不用SMIL就可以用最近超常看到的G...

2021-10-03 ‧ 由 Rachel ? 分享