首页 技术 正文
技术 2022年11月7日
0 收藏 429 点赞 878 浏览 1508 个字

插件介绍:

  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% 对象transformOrigin,单位像素、百分比或默认关键字(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.52,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倾斜。
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,129
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,601
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,444
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,218
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,852
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,940