在進行咖蜜兒項目中的渣渣雞炸雞頁面時,為了實現滾動屏幕時能夠添加動畫效果,使用了Amaze UI JS 插件中的滾動偵測(ScrollSpy),當屏幕滾動到一定區域加載并添加動畫效果。

一、滾動偵測使用方法
1.加載amazeui.js文件
2.html中使用:使用Data API調用,此方法相比較js調用來說比較簡單實現
data-am-scrollspy 屬性:
{animation:'fade'} 動畫類名,其他的動畫類見下方
{animation:'fade', delay: 300} 延遲動畫執行時間(ms),默認為 0 {animation:'fade', repeat: false} 是否重復動畫,默認為 true
3.amaze動畫效果庫(.am-animation-reverse class,讓動畫反向運行)
| Class | 描述 |
|---|---|
.am-animation-fade | 淡入 |
.am-animation-scale-up | 逐漸放大 |
.am-animation-scale-down | 逐漸縮小 |
.am-animation-slide-top | 頂部滑入 |
.am-animation-slide-bottom | 底部滑入 |
.am-animation-slide-left | 左側滑入 |
.am-animation-slide-right | 右側滑入 |
.am-animation-shake | 左右搖動 |
.am-animation-spin | 無限旋轉 |
上一篇: AJAX



