在進(jìn)行咖蜜兒項(xiàng)目中的渣渣雞炸雞頁(yè)面時(shí),為了實(shí)現(xiàn)滾動(dòng)屏幕時(shí)能夠添加動(dòng)畫(huà)效果,使用了Amaze UI JS 插件中的滾動(dòng)偵測(cè)(ScrollSpy),當(dāng)屏幕滾動(dòng)到一定區(qū)域加載并添加動(dòng)畫(huà)效果。

一、滾動(dòng)偵測(cè)使用方法
1.加載amazeui.js文件
2.html中使用:使用Data API調(diào)用,此方法相比較js調(diào)用來(lái)說(shuō)比較簡(jiǎn)單實(shí)現(xiàn)
data-am-scrollspy 屬性:
{animation:'fade'} 動(dòng)畫(huà)類名,其他的動(dòng)畫(huà)類見(jiàn)下方
{animation:'fade', delay: 300} 延遲動(dòng)畫(huà)執(zhí)行時(shí)間(ms),默認(rèn)為 0 {animation:'fade', repeat: false} 是否重復(fù)動(dòng)畫(huà),默認(rèn)為 true
3.amaze動(dòng)畫(huà)效果庫(kù)(.am-animation-reverse class,讓動(dòng)畫(huà)反向運(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 | 無(wú)限旋轉(zhuǎn) |
上一篇: AJAX
關(guān)鍵詞:



