插件介绍:

  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倾斜。

jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件的更多相关文章

  1. 基于jQ+CSS3页面滚动内容元素动画特效

    今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...

  2. jQuery和CSS3炫酷button点击波特效

    这是一款效果很炫酷的jQuery和CSS3炫酷button点击波特效.该特效当用户在菜单button上点击的时候.从鼠标点击的点開始,会有一道光波以改点为原点向外辐射的动画效果,很绚丽. 在线演示:h ...

  3. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  4. js和CSS3炫酷3D相册展示

    <!doctype html> <html> <head> <meta charset="UTF"> <title>js ...

  5. 为你的WordPress博客添加CSS3炫酷读者墙

    为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...

  6. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  7. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  8. css3 炫酷下拉菜单

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Css3炫酷总结使用

    先从CSS3的选择器说起: E F:所有的子孙元素: E>F: E中的子元素: E+F:E元素之后的最近的选择器: E~F:E中所以后面兄弟元素(CSS3 不包括自己本身,前面也不包括) att ...

随机推荐

  1. CFString​Transform

    Mattt Thompson撰写. Ricky Tan翻译. 发布于2012年8月6日关于一种语言好不好用,你只需要衡量以下两种指标: API 的统一性String 类的实现质量NSString 是基 ...

  2. [ASP.NET MVC]: - EF框架学习手记

    1.EF(Entity Framework)实体框架EF是ADO.NET中的一组支持开发面向数据的软件应用程序的技术,是微软的一个ORM框架. 2.什么是ORM?ORM指的是面向对象的对象模型和关系型 ...

  3. 比较全面的MySQL优化参考(上下篇)

    转自:http://imysql.com/2015/05/24/mysql-optimization-reference-1.shtml 本文整理了一些MySQL的通用优化方法,做个简单的总结分享,旨 ...

  4. Mac/Linux 定时运行命令行

    想要开机运行的话可以通过 mac 自带的 Automator 将要运行的命令打包成一个app,用后在用户组的“登录时启动”列表里加上那个app. 但是想要定时运行就不能这么做了,要用上一个叫cront ...

  5. 卡拉兹(Callatz)猜想

    题目描述 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去,最后一定在某一步 得到n=1.卡拉兹在195 ...

  6. IPC之PIPE

    管道是一种只允许用在有亲属关系的进程间通信的方式,由函数pipe创建一个管道,read,write进行读写操作. #include <unistd.h> ]); 参数pipefd[2]数组 ...

  7. Topcoder SRM 618 Div2 --900

    题意:给定两个NxN的棋盘,每个棋盘都有一个‘车’的摆放状态,问进行若干次交换,能否使棋盘1变为棋盘2. 交换规则:每次选两个‘车’,坐标分别为(r1,c1),(r2,c2),如果r1<r2并且 ...

  8. java 14-2 正则表达式的案例

    1.判断功能 String类的public boolean matches(String regex) 需求: 判断手机号码是否满足要求? 分析: A:键盘录入手机号码 B:定义手机号码的规则 136 ...

  9. java9-4 包

    面试题: package,import,class有没有顺序关系? 有. package > import > class Package:只能有一个 import:可以有多个 class ...

  10. C r and n(组合数)

    找出n个数的r个数的组合,如下形式: 输入:n,r分别为 5, 3 输出: 5    4     3 5    4     2 5    4     1 5    3     2 5    3     ...