Scroll Down

用於提示畫面可下移的簡易動態效果。使用類別為 .scroll-down 並以此作為子元件前綴詞。.scroll-down 做為容器與定位使用,主要內容由不同效果的子元件為主體。配色只有白色與深色,預設為白色,若要使用深色系請於子元件加上 .clr:dark。可於 .scroll-down 下添加 .scroll-down_txt 來標註文字,文字字級為 10px,在中文版 Webkit 瀏覽器可能會顯示 12px,可將文字做成圖取代。


Mousy

模擬滑鼠造型與滾輪滑動效果的樣式。組件名稱為 .scroll-down_mousy

<div class="scroll-down"> <div class="scroll-down_mousy"></div> <span class="scroll-down_txt"></span> </div> <div class="scroll-down"> <div class="scroll-down_mousy clr:dark"></div> <span class="scroll-down_txt"></span> </div>

Mousy Dot

將滾輪樣式變更為點。使用方式為在 .scroll-down_mousy 加上 .:dot

<div class="scroll-down"> <div class="scroll-down_mousy :dot"></div> <span class="scroll-down_txt"></span> </div> <div class="scroll-down"> <div class="scroll-down_mousy :dot clr:dark"></div> <span class="scroll-down_txt"></span> </div>

Line

單一垂直直線 Quint 滑動效果。組件名稱為 .scroll-down_line

<div class="scroll-down"> <div class="scroll-down_line"></div> </div> <div class="scroll-down"> <div class="scroll-down_line clr:dark"></div> </div>

Arrow

箭頭滑動導引效果。組件名稱為 .scroll-down_arrow

<div class="scroll-down"> <div class="scroll-down_arrow"></div> </div> <div class="scroll-down"> <div class="scroll-down_arrow clr:dark"></div> </div>

Pulse

箭頭率動效果。在組件 .scroll-down_arrow 加上 .:pulse

<div class="scroll-down"> <div class="scroll-down_arrow :pulse"></div> </div> <div class="scroll-down"> <div class="scroll-down_arrow :pulse clr:dark"></div> </div>