咨询电话:
15628812133
20
2018/05

使用插件简单实现滚动侦测动画效果

发布时间:2018-05-20 16:38:16
发布者:chaobai
浏览量:
0

    在进行咖蜜儿项目中的渣渣鸡炸鸡页面时,为了实现滚动屏幕时能够添加动画效果,使用了Amaze UI JS 插件中的滚动侦测(ScrollSpy),当屏幕滚动到一定区域加载并添加动画效果。

图片.png

一、滚动侦测使用方法

    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无限旋转


返回列表