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

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

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

相關課程

我喜歡透過分享幫助更多朋友,文章回饋、或是任何想法,歡迎透過臉書訊息與我聯繫。如果文章有所幫助,別忘了鼓掌灌溉、手指留香喔! ✧*。٩(ˊᗜˋ*)و✧*。

一個人的文藝復興

你現在的氣質裡,藏著你走過的路,讀過的書和愛過的人。

吳致賢(Jhih-Sian Wu)

Written by

Software Project Manager|樂於分享所見所聞 (*゚ー゚)|palaintw@gmail.com|LinkedIn @jhihsian

一個人的文藝復興

你現在的氣質裡,藏著你走過的路,讀過的書和愛過的人。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade