iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

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

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

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

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

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

#0 - SCSS 不負責任快速入門

在鐵人賽正式開始之前,想先寫一下SCSS。 因為我的CSS全部都是SCSS寫的...怕大家看不懂馬上棄看 QQ 這一篇是簡易的SCSS小抄說明,主要針對文章中出...

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

#0-好的動態讓你成為網站界愛馬仕、特斯拉!(前言)

Yo! 我是Rachel。今年成功從行銷轉職成前端工程師, 在前輩的鼓勵下參加了鐵人賽!這次選擇了前端的動態當主題。 為什麼呢?請聽我娓娓道來... 以前第一次...

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

#1-連結Hover動起來!(CSS 偽元素)

網站必備!連結動態 連結的Hover動態算是網頁動態最基本款, 一個好的動態絕對可以幫網頁 點擊率(CTR) 加分。 (話說當時菜鳥的我根本不知道什麼是hove...

2021-09-17 ‧ 由 Rachel ? 分享
DAY 3

#2 - Button文字換起來! (CSS: 移動位置)

Day 1 介紹了用CSS 偽元素的方式放大縮小變寬去做連結特效。傳送門 今天也選了幾個button的特效,使用位移的方式,簡單使用CSS特性就可以。 先來看看...

2021-09-18 ‧ 由 Rachel ? 分享
DAY 4

#3-打字特效炫起來!(CSS Animation)

昨天的第三個按鈕動態提案:文章傳送門 使用了CSS動態的動態的主菜——Animation。 其實有很多特效,只要能夠拆解他的原理,就可以使用Animation...

2021-09-19 ‧ 由 Rachel ? 分享
DAY 5

#4-圖片資訊藏起來!(Hover圖片&CSS Filter, Rotation)

前幾天都比較專注在文字上的CSS動態,今天就來看看圖片的吧! 比起一堆文字,放圖片絕對能夠說個好故事! 可是一張圖片不夠說明怎麼辦?那就在使用者Hover的時候...

2021-09-20 ‧ 由 Rachel ? 分享
DAY 6

#5-中秋月亮暈起來!不規則Blob球球(CSS)

這一兩年很常在網頁設計中看到這種不規則的小東西出現,甚至還會像波浪一樣動。 之前傻傻地用Svg做,然後一直換path,結果效能不太好。 上網一查發現其實只要用b...

2021-09-21 ‧ 由 Rachel ? 分享
DAY 7

#6-無限文字Logo跑馬燈 (不用JS! CSS Animation)

文字跑馬燈偶爾會在一些運動品牌或是潮牌看到,裝飾效果很棒又很炫, 以前也是傻傻以為要用JS寫,偵測跑完了再放下一段...... 但在Youtube看到這個教學影...

2021-09-22 ‧ 由 Rachel ? 分享
DAY 8

#7-漢堡Menu動起來!(CSS就搞定啦!)

常常看到有些網站的漢堡選單用換圖的方式從 三 --> X 會覺得有點可惜,其實漢堡選單的動態一樣CSS 就可以搞定! 說不定會因為動得太可愛,讓大家一直點...

2021-09-23 ‧ 由 Rachel ? 分享
DAY 9

#8-選單華麗開起來!超簡單!(animation-delay)

昨天做完了會動的漢堡動畫傳送門 今天來開關側邊欄吧! 當然只要控制 width0 —> 100% 就可以讓側邊欄從左邊推進來, 但今天來多一點點特效,先來...

2021-09-24 ‧ 由 Rachel ? 分享