---
# System prepended metadata

title: U00 hyui CodePen 及網站完整動態流程整理
tags: [切切切]

---

# U00 hyui CodePen 及網站完整動態流程整理
###### tags: `切切切`
## A.載入動畫<font color="#ff0000">*</font>
><font color="#68891a">網站 從首頁 進入前的循環(Cycle)動態。目的是利用循環小動態視覺上讓網站加載時看起來不這麼久</font>

<font color="#5387c9">常見做法</font>
視覺面：使用品牌Logo或能夠貫穿全站的視覺元素作為圖像。
動態面：持續循環、百分比倒數、任何有開始&結束的視覺動態。

<font color="#5387c9">建議</font>
循環動態持續期間：約1秒~1.5秒/循環1次。

<font color="#5387c9">提醒</font>
百分比動態使用時機：判斷網站大小，加載1秒~3秒 → 不需要放 , 超過3秒以上 → 需要放。

#### <font color="#d87076">範例</font>
* U00_CodePen 載入動畫 [link](https://codepen.io/collection/XqGJad)
* https://www.ecosyn-textile.com/
* https://www.taiwanfolkdance.com/
* https://www.i7-11.com/project


---

## B.轉場動態
><font color="#68891a">與「首頁載入動態」意義相仿，但 不是從首頁 進入的頁面，都需要加上「轉場動態」。舉個例子，如果當使用者每個頁面進入時都要跑百分比或複雜的載入動態時，
會讓人更容易失去耐心或是眼花撩亂，甚至離開網站。
所以此動態應該 越快速、越簡單 越好。
</font>

<font color="#5387c9">常見做法</font>
視覺面：單純造型、品牌Logo或能夠貫穿全站的視覺元素作為圖像。
動態面：持續循環、慢速閃爍。 

<font color="#5387c9">建議</font>
要做不做都可以，越簡單越好！
快速作法：大畫面色塊由左而右刷過去也可以。

#### <font color="#d87076">範例</font> 
* U00_CodePen 轉場動態 [link](https://codepen.io/collection/DwROPM?grid_type=grid)



---

## C.進場動態<font color="#ff0000">**</font>
><font color="#68891a">載入動態結束後，全畫面的物件即將要出現時所採用的任何形式，皆為進場動態。
</font>

<font color="#5387c9">常見做法</font>
動態面：淡入、位移、放大縮小、色塊遮擋 

<font color="#5387c9">建議</font>
* 依據畫面元素「資訊輕重」、「圖片吸引力」、「版面配置」做順序進場。
* 建議全站都可以加入進場動態，但須制定全站頁面共用的腳本&形式，否則太多種腳本或形式反而會容易導致視覺疲乏。
* 進場時間：控制在約2秒內。
* 快速作法：在網站CSS程式中的最外層加入透明度(opacity) 0~1淡入 或 全畫面物件依序左右進入。

#### <font color="#d87076">範例</font> 
* U00_CodePen 進場動態 [link](https://codepen.io/collection/XpEkbo)


---

## D.代表動態<font color="#ff0000">*</font>
><font color="#68891a">網站中最核心必要的設定，必須讓人印象最深刻的主要動態。此動態的吸睛度、視覺複雜度、獨特性在全站當中數一數二。
這類的動態，往往會讓使用者逛完網站離開後還是印象深刻，
還會突然在某一天回想起來，我們統稱為代表動態。
</font>

<font color="#5387c9">常見做法</font>
通常放在首頁第一塊視覺面的位置。
根據該品牌、形象，去想這個網站我要玩什麼動態。
你心中還沒玩過但想玩的動態去做發想。

<font color="#5387c9">建議</font>
基本上，全站通常只要有1個代表動態就夠囉！
（但還是可以依據網站目的性，會有兩個動態的可能。）

#### <font color="#d87076">範例</font> 



---

## E.持續動態
><font color="#68891a">為吸引使用者目光 或 增加畫面動感豐富度而持續Loop的動態</font>

<font color="#5387c9">建議</font>
比例不超過該畫面10%

<font color="#5387c9">注意</font>
須慎選持續動態的程式作法，因為這也是最容易造成網站速度變慢主因！
盡量避免全畫面都在動，除了會影響效能也可能造成視覺疲乏。

#### <font color="#d87076">範例</font> 

* U00_CodePen 持續動態 [link](https://codepen.io/collection/AKjOWd)
* 跑馬燈設計 https://friendlyhealthclub.jp/
* https://blotter.js.org/#/materials


---

## F.回饋動態<font color="#ff0000">**</font>
><font color="#68891a">當滑鼠游標 移過(move) 這個物件需傳達給使用者 是可點擊 或 是有意義 的。最常見的就是滑鼠移至按鈕上，按鈕呈現的視覺變化，就是回饋動態！</font>

<font color="#5387c9">常見做法</font>
視覺面：變色、透明度改變、文字替換。
動態面：微幅位移、放大縮小、附加物(出現另一個物件)...等。

<font color="#5387c9">建議</font>
快速作法：一點點位移(10px)、透明度(opacity)調整。

#### <font color="#d87076">範例</font> 
* U00_CodePen 回饋動畫  [link](https://codepen.io/collection/DVypzp)


---

## G.滾動動態<font color="#ff0000">**</font>
><font color="#68891a">根據設計腳本依序呈現，通常使用於「資訊過多」、「需提示性」、「需表達資訊輕重」的畫面。也有許多時候用在用故事型敘述資訊的網站中</font>

<font color="#5387c9">建議</font>
動態觸發點：建議於畫面由上往下約80%高度之處觸發，較可符合多種瀏覽器高度。快速作法：物件淡入、物件位移。

#### <font color="#d87076">範例</font> 
* U00_CodePen 滾動動態  [link](https://codepen.io/collection/AGVaLj)
* Animate On Scroll Library  https://michalsnik.github.io/aos/


---

## H.游標動態<font color="#ff0000">*</font>
><font color="#68891a">跟上述的回饋動態(Hover)，但回饋動態(Hover)的反應是觸發在物件上，游標動態是觸發在鼠標上。這類動態是這幾年趨勢，除了具提示作用，更有延伸資訊功能。</font>

<font color="#5387c9">建議</font>
可根據該物件「特性」做相對應提示。
這效果容易造成遮擋或是Z-index層級問題，須多考慮「作動範圍」、「變化效果大小」。

<font color="#5387c9">限制</font>
僅限有滑鼠的裝置看得到。

#### <font color="#d87076">範例</font> 


---

## I.點擊動態
><font color="#68891a">滑鼠點擊(Click or Hold)之後，被點擊物所產生的反饋效果，可能是音效、位移、大小...之類。這動態比較少看到，算是增加互動或特殊記憶的作法。</font>

#### <font color="#d87076">範例</font> 


---

## J.設備動態
><font color="#68891a">設備動態目前不是主流，但可作為新媒體開發的媒介或是網站的彩蛋使用。</font>

* <font color="#5387c9">鍵盤：</font>可根據該物件「特性」做相對應提示。
* <font color="#5387c9">陀螺儀（手機）：</font>行動裝置專屬，視差、顯示隱藏物件。
* <font color="#5387c9">鏡頭(特殊)：</font>偵測深度、晃動。
* <font color="#5387c9">麥克風(特殊)：</font>錄音、音量大小聲。
* <font color="#5387c9">手機(特殊)：</font>AR、VR、多畫面控制。

#### <font color="#d87076">範例</font> 


---

## F.離場動態
><font color="#68891a">離場動態 與 進場動態 其實就是意義類似，但一個是開始一個是結束的動態效果，會出現在當你點擊按鈕準備換頁前的全畫面動態。此動態可以營造畫面不跳頁閃爍的連貫性，以達成使用者優良的視覺體驗並提升許多質感。
＊無換頁=指的是網站在頁面切換時不會有閃爍跳轉的呈現</font>


<font color="#5387c9">常見做法</font>
可以進場動態相反方式離場，或是蓋板方式。
時間：1秒。

<font color="#5387c9">建議</font>
切記！離場動態一定要短暫，如果有載入動態，又有進場動態，現在再加入離場，整體體驗會非常不好。

#### <font color="#d87076">範例</font> 


---
## 雅瓊的範例
#### <font color="#d87076">範例</font> 
* U00_CodePen 雅瓊的範例 [link](https://codepen.io/collection/XPELOw)

---
## Scrollbars

#### <font color="#d87076">範例</font> 
* U00_CodePen ScrollBar 外觀設定 [link](https://codepen.io/collection/XgJBwg)
* https://kingsora.github.io/OverlayScrollbars/#!overview



---
## button
#### <font color="#d87076">範例</font> 
* U00_CodePen  button [link](https://codepen.io/collection/ngomEo)



---
## 常用的js
#### <font color="#d87076">範例</font> 
* U00_CodePen 常用的js [link](https://codepen.io/collection/nVJokZ)




---
## background圖片效果設定

#### <font color="#d87076">範例</font> 
* U00_CodePen  background圖片效果設定 [link](https://codepen.io/collection/nJVzKP)

---
## Accordion / 收合式選單

#### <font color="#d87076">範例</font> 
* U00_CodePen Accordion / 收合式選單 [link](https://codepen.io/collection/DOqwNY)



---
## 日曆

#### <font color="#d87076">範例</font> 
* U00_CodePen 日曆 [link](https://codepen.io/collection/Xdaeez)


---
## CSS文字設定

#### <font color="#d87076">範例</font> 
* U00_CodePen CSS文字設定 [link](https://codepen.io/collection/XKbjWm)

---
## 圖片Animation 效果

#### <font color="#d87076">範例</font> 
* U00_CodePen 圖片Animation 效果 [link](https://codepen.io/collection/AKbZQE)


---
## 選單範例

#### <font color="#d87076">範例</font> 
* U00_CodePen 選單範例 [link](https://codepen.io/collection/nroRYv)


---
## hyui模組
#### <font color="#d87076">範例</font> 
* U00_CodePen hyui模組 [link](https://codepen.io/collection/nmpWqB)


---
## hyui kit
#### <font color="#d87076">範例</font> 
* U00_CodePen hyui kit  [link](https://codepen.io/collection/AeqJwm)







