使用插件簡(jiǎn)單實(shí)現(xiàn)滾動(dòng)偵測(cè)動(dòng)畫(huà)效果

發(fā)布時(shí)間：2018-05-20 16:38:16

發(fā)布者：chaobai

瀏覽量:

在進(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à)效果。

圖片.png

一、滾動(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)