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會員,請他產生推薦連結,這樣兩邊都有才最好;如果不好找再用我的吧。

目前各平台買的課已經堆到看不完了,我要克制。

ヽ(∀゚ )人(゚∀゚)人( ゚∀)人(∀゚ )人(゚∀゚)人( ゚∀)ノ~~~

相關課程