jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍:
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倾斜。 |
jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件的更多相关文章
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
- jQuery和CSS3炫酷button点击波特效
这是一款效果很炫酷的jQuery和CSS3炫酷button点击波特效.该特效当用户在菜单button上点击的时候.从鼠标点击的点開始,会有一道光波以改点为原点向外辐射的动画效果,很绚丽. 在线演示:h ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
- 为你的WordPress博客添加CSS3炫酷读者墙
为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
在线预览 源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- css3 炫酷下拉菜单
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- Css3炫酷总结使用
先从CSS3的选择器说起: E F:所有的子孙元素: E>F: E中的子元素: E+F:E元素之后的最近的选择器: E~F:E中所以后面兄弟元素(CSS3 不包括自己本身,前面也不包括) att ...
随机推荐
- Scrum不是万能药,要在时机成熟时推行
敏捷很火热,大家都在谈敏捷:但不是所有团队都适合敏捷! 需要等待时机,时机成熟了,才推! 什么时候算时机成熟呢? 我们的经验是需要两点: 一.团队有三名或以上的研发工程师 : 二. 团队内有一名合适的 ...
- Google HTML/CSS代码风格指南(中文版)
原文链接:http://wncbl.cn/posts/c8e10815/ 看一下没什么印象,那就写一遍吧. 背景 本文档定义了HTML/CSS的编写格式和风格规则.它旨在提高合作和代码质量,并使其支持 ...
- [LoadRunner]性能测试实践_Hessian协议脚本编写
第一步,新建LR的脚本,选择Java Vuser协议: 第二步,编写hessian测试脚本,如下: import lrapi.lr; import java.net.MalformedURLExcep ...
- 问题解决——使用串口调试助手发送控制字符 协议指令 <ESC>!?
外行指挥内行的结果就是,你必须按照他想的去做,等做不出来再用自己的办法,而且必须如此. -------------------------------------------------------- ...
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...
- Linux 本地文件或文件夹上传服务器
Linux 本地文件或文件夹上传服务器 一.权限设置 本地文件或文件夹上传服务器,你首先需要获取到root权限: 二.上传方式 上传方式有两种 : 1.通过 FTP 客户端上传文件或文件夹: 2.通过 ...
- Redhat6.5 安装64位oracle11.2.0.1
系统架构 [root@localhost ~]# uname -a Linux db 2.6.32-431.el6.x86_64 #1 SMP Sun Nov 10 22:19:54 EST 2013 ...
- 基于Retrotfit2.1+Material Design+ijkplayer开发的一个APP(新闻,gif 动图,视频播放)
此项目主要目的还是为了练习框架的使用,仅供学习用途. 数据来源 新闻 直接用的聚合数据提供的接口:https://www.juhe.cn/docs/api/id/235gif动图 通过jsoup爬的某 ...
- 微信公众号开发之LBS
百度地图Web服务api:http://lbsyun.baidu.com/index.php?title=webapi 1.测距 Route Matrix API v2.0:http://lbsyun ...
- Linux 常用基本命令
这两天有俩哥们问了我linux的事,问我在工作中需不需要用到,需不需要学会 一个是工作1年不到的,我跟他说,建议你学学,在以后肯定是要用到的,虽然用到的机会不多,但是会总比不会好 另一个是工作6年的, ...