一個好的動態會讓好的網頁設計,瞬間成為網站界愛馬仕 / 特斯拉!動態網頁比起靜態的網頁,更能完整傳遞網站的故事和訊息,減少網站跳出率、提高點擊率、甚至轉換率。
那客戶想要什麼動態?他們卻是一臉黑人問號。
所以這次鐵人賽,想要搜集網路的案例、教學,(希望可以) 做出 30 個可用的/常見的/很炫的動態提案,並在做中重新爬梳背後的原理和程式邏輯:從最基本的CSS、SVG 動畫到 利用JS、 Canvas 、D3.js 以及 Three.js。
菜鳥工程師也可以很罩地跟客戶說:別擔心,這是我的網頁動態提案!
你有以下困擾嗎? 常常不知道要怎麼命名Class嗎?(還一直去 Google 英文字的是你ㄇ ?)還是常常寫了一個Class樣式後就被另一個Class樣式給覆...
品牌常常會有一些數字想要呈現去說服消費者,當然只放靜態的數字就太無聊了,最直覺的動態就是讓數字跑起來! 先來看成果: 今天終於來到了JS動態篇章,比賽也進行1/...
這幾年手機、電腦有黑暗模式,很多網頁也加上像電燈一樣的開關啦!黑暗模式可以降低亮度,減少對眼睛的壓力。弱光環境下比較有可讀性。我自己是喜歡去網頁一直玩開關(哈哈...
今天來介紹一下往下滑和往上滑的指引動畫和搭配Web API。現在都很流行第一屏設計做好做滿,有時候太美了會讓使用者忘記(/根本不想)往下滑, 適當地指引下滑,就...
進場特效也是基本再基本的網頁動態!尤其是當網頁內容塞太多時,適當地加上進場特效可以幫助使用者閱讀重點。 以前常用的套件如Scroll Magic,或計算網頁滑動...
好的Nav bar的動態可以讓網站不那麼呆板,其實實作的技術也不難,就是偵測頁面的滾動向下滑的時候再出現 今天實作兩個: 提案 Nav bar的消失 Na...
敝人很常踩到詐騙網站,第一屏就是一個慶祝的小動畫,恭喜我中獎(好想中威力彩啊) 網頁也很常有這種獎勵使用者的小動畫,譬如說送出一個訂單、或是幫忙寫了一個評價,我...
進度條一般都是搭配文章使用,主要是告訴使用者目前閱讀到哪裡~這是我自己非常喜歡的網頁設計,讓你可以預設自己閱讀的進度,安排自己時間~(太長就快逃啊!) 看到了這...
Loading動畫不難,但這次也藉著 Loading 動畫來練習&認識一下SVG的 filter ~ 先來看看成果: 下面先複習一下JS的網頁載入,再看code...
要讓SVG 動起來,可以使用SMIL:SVG的原生動畫規範,雖然前幾年Chrome放話不再支援,但這幾年好像暫緩了。 當然不用SMIL就可以用最近超常看到的GS...