jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
2024-08-19 23:44:00
插件介绍:
jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件。该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转、翻转、放大缩小等动画特效。使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果。
基本用法
$('.smoove').smoove(options);
上面的代码会在class为 smoove 的元素上使用默认参数初始化 jQuery Smoove。
你可以通过data-attributes
属性来覆盖插件的默认参数,例如下面的例子:
<div class="foo"></div>
<div class="bar" data-move-x="-200px" data></div> <script src“/jquery/jquery.min.js"></script>
<script src="/libs/jquery.smoove.min.js"></script>
<script>
// 覆盖smoove的默认参数
$(".foo, .bar").smoove({
offset : '15%',
// moveX is 覆盖 ".bar" 的 -200px
moveX : '100px',
moveY : '100px',
});
</script>
注意:在使用 data-attributes 属性时,要将属性的驼峰格式改为连字符格式,例如:moveX
要改为data-move-x
可选参数:
名称 | 类型 | 默认值 | 描述 |
offset | integer or string | 150 | 当对象滑动进入屏幕之前距离屏幕底部的距离,例如:10%。 |
opacity | integer (0-100) | 0 | 当对象滑动进入屏幕之前的透明度。 |
perspective | integer | 1000 | 对象的3D perspective,单位像素。 |
transformOrigin | string | 50% 50% | 对象transform 的Origin ,单位像素、百分比或默认关键字(left, right, top or bottom) |
skewY | angle | none | 沿Y轴的2D倾斜度。 |
move | string | none | 沿X轴和Y轴2D移动的距离,例如:100px,50% 。 |
move3d | string | none | 沿X轴、Y轴和Z轴3D移动的距离,例如:10px,10px,10px 。 |
moveX | string | none | 沿X轴移动对象,例如:10px or 10% |
moveY | string | none | 沿Y轴移动对象,例如:10px or 10% |
moveZ | string | none | 沿Z轴移动对象,例如:10px or 10% |
rotate | string | none | 2D旋转,例如:90deg |
rotate3d | string | none | 沿X轴、Y轴和Z轴的3D旋转,例如:1,1,1,90deg |
rotateX | string | none | 沿X轴的3D旋转,例如:90deg |
rotateY | string | none | 沿Y轴的3D旋转,例如:90deg |
rotateZ | string | none | 沿Z轴的3D旋转,例如:90deg |
scale | decimal or string | none | X轴和Y轴方向上的2D缩放 (x,y),例如2.5 或2,0.5 |
scale3d | string | none | 沿X轴、Y轴和Z轴方向上的3D缩放 (x,y,z),例如:2,3,0.5 |
scaleX | decimal | none | X轴方向上的缩放。 |
scaleY | decimal | none | Y轴方向上的缩放。 |
skew | angle | none | 沿X轴和Y轴方向上的2D倾斜,例如:90deg,90deg |
skewX | angle | none | 沿X轴方向上的2D倾斜。 |
skewY | angle | none | 沿Y轴方向上的2D倾斜。 |
最新文章
- [COJ2201][KOJ0223][KOJ0250]花园
- android 用NineOldAndroid实现的弹出按钮
- ZooKeeper快速搭建
- [iOS] UIImage和CGImageRef
- Git - Download for Linux and Unix
- IOS 横屏中添加UIImagePickerController获取系统图片
- 解决Flash挡住层用z-index无效的问题
- 自动生成makefile的脚本
- CSS3动画(360度旋转、旋转放大、放大、移动)
- ThinkPHP - 缓存使用
- 201521123053《Java程序设计》第四周总结
- 叼叼叼,HTML5日期(Date)类型和文本(Text)类型互相转换
- .NET MVC 简单的插件式开发
- IDEA对新建java线程池的建议
- DevOps知识地图实践指南
- PE文件 03 重定位表
- Java实现bt文件下载、制作、解析、磁力链接
- Collection集合 总结笔记
- npp基本设置
- android基础知识普及