不知不覺，三十天的鐵人賽就要結束了。一開始還覺得時間很漫長，但到了二十幾天之後我開始發現時間不多了，十分珍惜每一次能夠和大家分享的機會。
閱讀更多相信大家對於這個頁面都不陌生吧。這是我們2023 iThome 鐵人賽的首頁。我覺得他的粒子特效和地球很酷，所以我們今天就來看看怎麼做吧。 以下是今天我們的目標。為了版面乾淨我省略了上面的文字，只留下熊俠、標題、粒子特效、和地球。且為了讓他不要太長我有稍微縮小了一點。 HTML 架構 上面 header 我們放了兩張圖片，一個是熊俠，一個是標題。下面的 section 我們放了五個 div，它們分別是 粒子特效 粒子特效 粒子特效 光線 地球 1<header> 2 <img …
閱讀更多今天我們要來製作Slider效果。不過要用一個你應該沒有看過有人這樣做但卻很簡單的方法。 應用應該不用我多說，不管是公司網站展示產品，學校輪播榮譽榜，還是業界案例輪播介紹都會使用到slider。而我今天忙到晚上九點半才開始寫文章是因為白天在做這個心理測驗，左右滑動效果也是使用slider。 不過想到要定位、還要偵測各種滑鼠點擊、移動、手機點擊就十分麻煩。你寫 code 累 debug 累瀏覽器也累要一直監聽…歸剛欸… 這時 CSS 又出現了。向你介紹： scroll-snap-type。 scroll-snap-type 這個屬性可以讓元素上下或左右滑動時一滑就是整頁。我覺得最讚的是可以在筆電上面的觸控板直接往右滾，而且因為是內建語 …
閱讀更多今天我們要來製作 iT 邦幫忙首頁的導覽列。我們先來看看原本的網站。 呃好喔...晚點再看看... 沒事我有先截圖。 你有注意到嗎?第二排的導覽列在往下滾之後會固定在上方，並顯示出縮小版的 Logo。我覺得蠻可愛的，一個好的 UI 就事要有這種平常不會注意但讓體驗很順暢舒服的小巧思。我們來搭配昨天的 Animate On Scroll 原理來製作吧。 複習: Day26 不要躲在下面動! Animate On Scroll 自己做 基本版面 首先我們先做一個類似於 iT 邦幫忙首頁的版面。這應該是這個系列最多的 HTML 了。 1<main> 2 <header class="header"> …
閱讀更多我們都知道 CSS 動畫可以用 @keyframes 來做，但是他們都是馬上就觸發的。就算元素還沒有出現在畫面上，動畫也已經開始了。 如果要做出滾動到某個位置才觸發的動畫，就需要用到 JavaScript 來偵測滾動位置，然後再加上 CSS 動畫。沒錯，JavaScript 回來了。 原理 我們要做的是當元素出現在畫面上時，才觸發動畫。所以我們要偵測元素是否出現在畫面上。 我們可以用 getBoundingClientRect() 來取得元素相對於螢幕的位置，然後再用 window.innerHeight 來取得畫面的高度，就可以知道元素是否出現在畫面上了。 這裡是一個我做的範例。你可以看到當元素的上方超出畫面時top就會變負值。當 …
閱讀更多我們今天要來做幾份漢堡選單。 原理和 Day14 今天我想來點… 純 CSS 的開關 一樣，都是用 input 的 checkbox 來儲存狀態好讓其他元素可以抓到。而他本身的狀態使用 label 來遠端遙控。 我先不要一次跳太多步驟。這是一個基本還未完成的版面。 1<input type="checkbox" id="menu"> 2<label for="menu"> 3 <div></div> 4 <div></div> 5 <div></div> 6 <span …
閱讀更多今天我們要來做這個紓壓的效果: https://codepen.io/edit-mr/pen/poqqoLr 然後你可以應用做出一些很酷的效果: 原理 原理其實很簡單。要讓兩個東西之間相連只需要模糊就會糊在一起了。 1<div class="box"> 2 <div class="circle-small"></div> 3 <div class="circle-big"></div> 4</div> 1.box { 2 position: relative; 3 height: 100vh; 4 …
閱讀更多今天我們會提到幾個不同的原理。你可以像生菜沙拉一樣自己條配。 漸層動畫有甚麼難的? 我阿嬤...不會 CSS 1body { 2 background: linear-gradient(90deg, red, yellow); 3 animation: gradientChange 1s infinite; 4} 5 6@keyframes gradientChange { 7 to { 8 background: linear-gradient(90deg, yellow, green); 9 } 10} 額，只有層，沒有漸。這是因為漸層是屬於 background-image，你要他怎麼漸圖片? 自己動 我們今天要用到的第一個方 …
閱讀更多- 今天我們要來做一些乱薍覼釠亂碼效果。
閱讀更多 今天是第二十一天，已經走完2/3的路程，我媽還以為我早被淘汰了。這個系列明明是叫【不用庫 也能酷 - 玩轉 CSS & Js 特效】，但 Js 出現了幾篇?有五篇嗎?難道 JavaScript 是來湊關鍵字的嗎?今天就來聊聊為甚麼使用純 CSS 做效果如此吸引人。 對手進場 CSS transition 和 @keyframes 就性能上來說兩者基本上沒有區別，所以我們都歸於 CSS 動畫。你可以根據使用情境來選擇使用哪一種。比如說滑鼠互動可以使用 transition，出場動畫可以使用 @keyframes。 複習：Day4 自己動! @keyframes 與 Transition JavaScript …
閱讀更多