在进行咖蜜儿项目中的渣渣鸡炸鸡页面时,为了实现滚动屏幕时能够添加动画效果,使用了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