CSS網頁繪圖/JS網頁動畫-Hahow
0809 讀取動畫
https://codepen.io/pala/pen/ZjVGpK
幾何圖形和色塊排列組合,加入影格概念,拼出一堆看了有趣的互動效果~ლ(・´ェ`・ლ)
0814 純CSS畫貓咪
延續先前《動畫互動網頁程式入門》 的天氣盒子,開始對用程式碼畫圖多了興趣;相對於制式的切版好玩多了。
同時也喚起了印象,Hahow去年有一門主題很特別的CSS課程,那時募資有在動態看到,覺得有趣。
回頭翻了翻評價,十三個評價都五星,再看了下介紹影片,最後面對價格…掙扎了大概兩天決定購入。
在紅寶石範例,第一次看到用CSS畫出三角形的寫法,後續還有心形、五角形、星星的畫法;一時好像想不到什麼場合會用到,但充滿「原來還可以這樣用啊」的新鮮感。
https://codepen.io/pala/pen/MBRGLL?editors=1100
小貓是課程範例,以前有看過CSS畫可愛動物,這次終於解鎖了成就(✪ω✪)/
0823 貓咪互動
貓看滑鼠
https://codepen.io/pala/pen/mGJNVW?editors=1011
本來以為貓咪是用程式碼刻出來的,看完才知道其實是五張看不同角度的貓咪圖片,依照滑鼠的位置換圖,做起來簡單很多、效果也蠻有趣的。
大略把螢幕切成四塊,判定方式是當滑鼠的X座標小於左右畫面的一半,放看左邊的貓咪圖;如果同時符合Y座標小於上下畫面的一半,就換看左上的貓咪圖。
貓咪蘿蔔蹲
https://codepen.io/pala/pen/xawKxg?editors=0011
放入三張貓咪圖,取個間距排好。有預設的功能(offset)可以抓出在網頁反白圖片,左上角那個點。
藉此得到個別圖片上的X座標,再加上圖片自身寬度的一半,取得圖片中線位置;當滑鼠滑過中線位置,就讓貓咪的Y軸改變,呈現浮起來的效果。
邏輯不難,排出來蠻好玩的。
0825 卡牌遊戲
https://codepen.io/pala/pen/bxERRV?editors=1111
是近幾年熱門的前端Vue框架實作小遊戲,看Demo時覺得相當華麗,沒有寫過類似的動畫,之前大多停在頁面排版練習,於是懷著既期待又怕受傷害的心情開始。
一邊想著「如果能寫出來一定很有成就感!」
從有太陽到夜幕低垂準備出門倒垃圾,完成的成就感是有了;只是一小時長度的課程,寫了超過五小時 (;´༎ຶД༎ຶ`)
除了對資料雙向綁定的Vue框架不熟卡卡外,很多動畫地方寫著寫著腦袋就短路了。
就好像理論上自己房間所有東西都會是我們帶進去的,但是時間一久會開始找不到東西,或是看著某個東西想著什麼時候買過這個了?
課程前面蠻順暢的,到了後面邏輯開始變多,漸漸越寫越慢,寫個幾行就要把影片停下來整理思緒。
「嗯為什麼我這樣寫那邊也會跟著動啊(沈思)」
「畫面出現效果,但我不記得前面有寫過啊(發呆)」
用上了幾個沒見過的CSS屬性,transform-style: preserve-3d(保持三維空間)、backface-visibility,原來CSS可以做到寫好正面和反面,再把他們合成一張的類似效果。
卡片背面紅色花紋是用linear-gradient刻出來的。
最喜歡的細節是發牌前滑鼠移過去、每張卡片會以偏5度的形式扇型展開,覺得這樣細節很美好(不難但大加分)
0826 電影動態選單
https://codepen.io/pala/pen/ZMQwpg
Vue單元的壓軸範例,課程長度75分鐘,邊看邊寫用了約4個小時;練習Vue的資料綁定特性、以及許多微互動效果。
在JavaScript的部分,大約只有50多行,稍微瞭解Vue怎麼跟頁面元素互動,蠻方便的,原來雙向綁定的魅力是這樣啊~(把複雜的東西簡化到我的小腦袋瓜能理解(′゜ω。‵))
範例花最多時間、也是最有趣的部分,就是許多細微的微互動效果了,CSS寫了快200行,細修畫面的過程還蠻療癒的。
說難嘛倒也不是,只是要想的到要用哪些效果,全部疊起來的結果要好看,需要蠻多時間來來回回去試。
第一次寫加入購入車的效果,背後邏輯:購物車下覆蓋透明度0的長方形卡片,當使用者點擊某張卡片「Add to My Cart」時,抓按鈕位置和對應海報,讓長方形卡片瞬移過去、顯示海報並以透明度1,移動回定位。
神奇。
加入資料後,購物車會像心臟般的快速收縮一下;邏輯意外簡單,監聽事件三行解決。
最喜歡的地方是點擊購物車展開的清單,單純的用黑色遮罩蓋上去,層次效果並不明顯;所以同時讓背後的卡片縮小,用兩種效果讓使用者很好的聚焦前面的購物清單。
清單列表小細節也很多,移入時會有白色背景、小小的圓角、還有稍微浮起來的效果,是些有了更好,沒人提醒會忽略的細節。
滿滿成就感的範例!
Hahow 好朋友推薦計畫
近期行銷活動,透過我的推薦連結、新註冊有$300購課金、可以保留到年底、折抵上限20%,要買什麼課都可以。
成功購買第一堂課以後,推薦者會收到$300購課金。
建議找認識的朋友是Hahow會員,請他產生推薦連結,這樣兩邊都有才最好;如果不好找再用我的吧。
目前各平台買的課已經堆到看不完了,我要克制。
ヽ(∀゚ )人(゚∀゚)人( ゚∀)人(∀゚ )人(゚∀゚)人( ゚∀)ノ~~~
相關課程
我喜歡透過分享幫助更多朋友,文章回饋、或是任何想法,歡迎透過臉書訊息與我聯繫。如果文章有所幫助,別忘了鼓掌灌溉、手指留香喔! ✧*。٩(ˊᗜˋ*)و✧*。