iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

30天30個前端任務系列 第 3

#2. Blurring Loading Image(原生JS版), Vercel 出乎意料好用

將專案部署到Vercel

挑戰開跑這兩天,遇到最困擾的就是無法順利將專案部署到GitHub Pages。關於這個問題,也有其他網友遇到,為了不影響主題進度,決定換一個平台部署靜態網站。
這部分Vite官方文件提供蠻多方式的,像是GitHub Pages + Travis CI、GitLab Pages、Netlify、Google Firebase、Surge、Heroku..等等。最後我選定Vercel來部署專案。

https://ithelp.ithome.com.tw/upload/images/20210903/20130534C8zZzipnCr.png
在Vercel部署網站真的超級簡單,只要用自己的GitHub帳號SignUp,引入自己的repo,就能夠把repo內容自動部署上去。

https://ithelp.ithome.com.tw/upload/images/20210903/201305342l8TxmpyDU.png
而Vercel也有提供自動化部署的服務,只要master內的程式碼有更新,Vercel內建的CI/CD系統就會自動執行rpm run build打包網站,執行deploy流程。

這裡可以查看目前專案:
https://30-widgets-marathon.vercel.app/

照片模糊載入效果

好,那麼今天的Component是什麼呢?請先參考這個codepen:
https://codepen.io/zyrxdkoz/pen/mdwELqX

目標效果
畫面中的影像,從模糊到清晰。中間的百分比數字則從0%到100%,然後逐漸淡出。

實作邏輯

HTML+CSS 部分

  1. 用background屬性將背景圖片置入section tag,建立.bg css選擇器,設定fill background。讓圖片填滿整個畫面,並置於中央。
  2. .bg選擇器加入filter屬性,值為 blur(radius)

JS部分

  1. 選定要被渲染的兩個DOM,一個是背景,一個是中間的百分比數字
  2. 宣告scale函式,設置五個參數,分別是數字num、最小輸入、最大輸入、最小輸出、最大輸入,回傳值則是(num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min 這樣就能夠在一個被設定好的範圍內標記階數,參考出處
  3. 宣告blurring函式,加入scale函式來設定渲染的階數。
  4. 宣告load變數為0,運用setInterval,每25毫秒調用一次blurring函式,然後load ++
  5. 當load變為100,便執行clearIntervel結束定時器。

明日任務

  1. 重整專案內容
  2. 卡片放大縮小效果

上一篇
#1. Hidden Search Component搜尋框彈出效果(CSS)
下一篇
#3. Expanding Cards(原生JS版)+ 用tailwindcss玩grid排版
系列文
30天30個前端任務19

尚未有邦友留言

立即登入留言