iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

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

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

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

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

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

#18-手寫字特效炫起來!(SVG dasharray & dashoffset)

第3天寫了打字特效炫起來! 今天來個姊妹篇,手寫字特效炫起來! 已經默默進入SVG幾天了... 老樣子先來看成果! 底線是我用Adobe XD拉的~按下右鍵...

2021-10-04 ‧ 由 Rachel ? 分享
DAY 20

#19-我的台北直直落! 文字影片+滾動視差

有一陣子滑網頁案例時,超常看到用SVG配上滾動視差(Parallax) 今天終於要來試試看了! 滾動視差就是讓元素動的幅度和滾動的幅度有落差, 主要是偵測scr...

2021-10-05 ‧ 由 Rachel ? 分享
DAY 21

#20-有看到我的貓嗎?用offsetPath讓貓貓滾起來!(SVG)

偶爾會看到,往下滾,球就會跟著滾動的幅度以拋物線移動。 今天就來使用SVG的Path做做看! 其實是我做好的第二個版本,第一個是使用GSAP & Scr...

2021-10-06 ‧ 由 Rachel ? 分享
DAY 22

#21-用Canvas做科技感的動態球!(+什麼時候該用CSS/SVG/Canvas?)

今天正式進入Canvas的世界了! 老樣子先看成品: 今天來做點科技感的畫面,橘色是滑鼠的游標,這個是滿常看到的: 但在這之前,想先談一下到底是什麼時候該用S...

2021-10-07 ‧ 由 Rachel ? 分享
DAY 23

#22-掰惹Gif!用Sprite雪碧圖做動畫! (CSS & Canvas)

有時候會碰到網站要放GIF動畫,但GIF大小動輒幾M起跳, 造成網頁Loading慢、圖片邊緣鋸齒,支援顏色也不多,不太完美。 這時候 sprite 雪碧圖就登...

2021-10-08 ‧ 由 Rachel ? 分享
DAY 24

#23-用Canvas做Google恐龍遊戲(都市老妹生存記!能擊退經痛加班和渣男嗎?)

大家都知道Google斷線時會有小恐龍的離線遊戲, 以前第一次看到的時候超驚喜!(我到現在斷線的時候還是會玩一下XD) 品牌如果發揮一點創意,將品牌元素加進小遊...

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

#24-這個播放器也太潮!用Canvas放音樂!w/JS web audio API

今天來試試看利用Canvas來做聲音的視覺表現! 搭配Javascript web audio API (其實是因為找不到好玩的點子) 主要是根據這個影片實作。...

2021-10-10 ‧ 由 Rachel ? 分享
DAY 26

#25-讓長條圖一條條動起來~大數據時代!入手 D3.js~

自己做行銷的時候,很喜歡玩數據, 數據可以打破一些先入為主的想法、 也可以給我們更全面的視角、或是新的發現。 也因此產生了學習D3的念頭。 近幾年來流行大數據、...

2021-10-11 ‧ 由 Rachel ? 分享
DAY 27

#26-圓餅圖動起來!玩轉D3.js漸變功能Transition+Interpolate

昨天用了D3的transition, 今天來試試看attrTween來讓圓餅圖長出來! 老樣子先來看成果: 今天會先來看一下D3的Interpolate 想看...

2021-10-12 ‧ 由 Rachel ? 分享
DAY 28

#27-微互動折線圖動態!就是要比較才看得出結果啊 (D3.js)

前兩天都是展現Data而已,今天來試做看看互動&換資料的動態! 折線圖也是滿常見的樣式, 這次以非洲的通膨為主題,主要功能為 1.可以有三個國家資料做比較 2...

2021-10-13 ‧ 由 Rachel ? 分享