在進(jìn)行咖蜜兒項(xiàng)目中的渣渣雞炸雞頁面時(shí)，為了實(shí)現(xiàn)滾動(dòng)屏幕時(shí)能夠添加動(dòng)畫效果，使用了Amaze UI JS 插件中的滾動(dòng)偵測(ScrollSpy),當(dāng)屏幕滾動(dòng)到一定區(qū)域加載并添加動(dòng)畫效果。
一、滾動(dòng)偵測使用方法
1.加載amazeui.js文件
2.html中使用：使用Data API調(diào)用，此方法相比較js調(diào)用來說比較簡單實(shí)現(xiàn)
data-am-scrollspy 屬性：
{animation:'fade'} 動(dòng)畫類名，其他的動(dòng)畫類見下方
{animation:'fade', delay: 300} 延遲動(dòng)畫執(zhí)行時(shí)間（ms），默認(rèn)為 0 {animation:'fade', repeat: false} 是否重復(fù)動(dòng)畫，默認(rèn)為 true
3.amaze動(dòng)畫效果庫(.am-animation-reverse class，讓動(dòng)畫反向運(yùn)行)
| Class | 描述 |
|---|---|
.am-animation-fade | 淡入 |
.am-animation-scale-up | 逐漸放大 |
.am-animation-scale-down | 逐漸縮小 |
.am-animation-slide-top | 頂部滑入 |
.am-animation-slide-bottom | 底部滑入 |
.am-animation-slide-left | 左側(cè)滑入 |
.am-animation-slide-right | 右側(cè)滑入 |
.am-animation-shake | 左右搖動(dòng) |
.am-animation-spin | 無限旋轉(zhuǎn) |
上一篇： AJAX
關(guān)鍵詞:
