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

将专案部署到Vercel

挑战开跑这两天，遇到最困扰的就是无法顺利将专案部署到GitHub Pages。关於这个问题，也有其他网友遇到，为了不影响主题进度，决定换一个平台部署静态网站。
这部分Vite官方文件提供蛮多方式的，像是GitHub Pages + Travis CI、GitLab Pages、Netlify、Google Firebase、Surge、Heroku..等等。最後我选定Vercel来部署专案。

在Vercel部署网站真的超级简单，只要用自己的GitHub帐号SignUp，引入自己的repo，就能够把repo内容自动部署上去。

而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 部分

用background属性将背景图片置入section tag，建立.bg css选择器，设定fill background。让图片填满整个画面，并置於中央。
在.bg选择器加入filter属性，值为 blur(radius)

JS部分

选定要被渲染的两个DOM，一个是背景，一个是中间的百分比数字
宣告scale函式，设置五个参数，分别是数字num、最小输入、最大输入、最小输出、最大输入，回传值则是(num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min 这样就能够在一个被设定好的范围内标记阶数，参考出处
宣告blurring函式，加入scale函式来设定渲染的阶数。
宣告load变数为0，运用setInterval，每25毫秒调用一次blurring函式，然後load ++
当load变为100，便执行clearIntervel结束定时器。