鼠标滚动插件smoovejs和wowjs
2015-12-05 21:36
701 查看
置顶文章:《纯CSS打造银色MacBook Air(完整版)》
上一篇:《图片ping、JSONP和CORS跨域》
作者主页:myvin博主QQ:851399101(点击QQ和博主发起临时会话)
::selection{
background:blue;
color:red;
}
前言
鼠标滚动特效很常见,当鼠标滚动到特定的位置时才会触发相应的CSS特效,这里简单聊两款鼠标滚动特效插件smoovejs和wowjs。smoovejs
smoovejs基于jQuery,所以在引入smoovejs之前确保先引入jQuery,相关版本的smoovejs的cdn可以点击这里或者下面的链接查看。http://www.bootcdn.cn/jquery-smoove/
激活smoovejs如下:
$('.foo').smoove(option);
其中,添加滚动特效的方式有两种:
1. 在标签内使用data-*属性来添加 2. 在脚本中通过`$('.foo').smoove(option)`来添加
以div为例,对应的两种方法的关键代码如下:
1. <div class='foo' data-move-x='100px' data-move-y='100px'>data-*方法</div> <script> $('.foo').smoove({offset:'40%'});//在40%触发 </script> 2. <div class="foo">脚本触发</div> <script> $('.foo').smoove({ offset:'40%', moveX:'100px', moveY:'100px' }); </script>
这里需要注意两点:
1. 使用`$('.foo').smoove(option)`的优先级要高于使用data-*的优先级。 2. 对于data属性要使用驼峰命名
上面的只是简单的移动效果,smoovejs还有其他效果选项,这里以表格形式列出,感兴趣的可自行尝试。
Name | Type | Default | Description |
---|---|---|---|
offset | integer or string | 150 | Distance to the bottom of the screen before object glides into view e.g. 10%. |
opacity | integer (0-100) | 0 | The opacity of the object before it comes into view. |
perspective | integer | 1000 | 3D perspective in pixels. |
transformOrigin | string | 50% 50% | Origin of the transform in pixel, percentage or keyword (left, right, top or bottom). |
skewY | angle | none | 2D skew along Y-axis e.g. 90deg. |
move | string | none | 2D move along the X- and the Y-axis e.g. 100px,50%. |
move3d | string | none | 3D move along the X-, Y- and the Z-axis e.g.10px,10px,10px. |
moveX | string | none | Move the object along its X axis e.g. 10pxor 10%. |
moveY | string | none | Move the object along its Y axis e.g. 10pxor 10%. |
moveZ | string | none | Move the object along its Z axis e.g. 10pxor 10%. |
rotate | string | none | 2D rotation e.g. 90deg. |
rotate3d | string | none | 3D rotation along X-, Y- and Z-axis e.g. 1,1,1,90deg. |
rotateX | string | none | 3D rotation along X-axis e.g. 90deg. |
rotateY | string | none | 3D rotation along Y-axis e.g. 90deg. |
rotateZ | string | none | 3D rotation along Z-axis e.g. 90deg. |
scale | decimal or string | none | 2D scale on X- and Y-axis (x,y) (e.g. 2.5or 2,0.5). |
scale3d | string | none | 3D scale on X-, Y- and Z-axis (x,y,z) (e.g. 2,3,0.5). |
scaleX | decimal | none | 2D scale on X-axis. |
scaleY | decimal | none | 2D scale on Y-axis. |
skew | angle | none | 2D skew along X- and the Y-axis (e.g. 90deg,90deg). |
skewX | angle | none | 2D skew along X-axis e.g. 90deg. |
skewY | angle | none | 2D skew along Y-axis e.g. 90deg. |
wowjs
wowjs基于animatecss,animatecss是一款css3特效的集成,总共数十种(没有去数,想知道确切数字的可以自行去count~~~)css3特效,在使用的同时打开看看这些特效代码相信对我们有益无害。相应版本的animatecss和wowjs的cdn可点击下方链接查看。
animatecss:http://www.bootcdn.cn/animate.css/
wowjs:http://www.bootcdn.cn/wow/
在需要滚动特效的元素上添加相应的class即可,如下:
<div class="wow rollIn">wowjs</div>
其中,wow是基础类。同时有3个data属性可以使用,
data-wow-duration、
data-wow-delay和
data-wow-iteration,可根据需求自行添加。
然后在脚本中初始化wow对象即可,如下:
new WOW.init();
这里是使用默认配置,也可以根据需要修改默认配置,配置选项如下:
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
boxClass | 字符串 | ‘wow’ | 需要执行动画的元素的 class |
animateClass | 字符串 | ‘animated’ | animation.css 动画的 class |
offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
mobile | 布尔值 | true | 是否在移动设备上执行动画 |
live | 布尔值 | true | 异步加载的内容是否有效 |
修改配置通过字面量修改即可,如下:
var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }); wow.init();
完。
转载请标明作出处
作者:myvin
原文出处:
上一篇:《图片ping、JSONP和CORS跨域》
置顶文章:《纯CSS打造银色MacBook Air(完整版)》
相关文章推荐
- 常规功能和模块自定义系统 (cfcmms)—021自定义grid列(5附件列)
- JavaScript-DOM编程
- js对象的引用
- JS面向对象的学习
- extjs里的viewport 和window的理解,
- JavaScript事件
- jsp基础
- JS性能优化的那点事
- jsp页面跳转方式
- MyEclipse中修改jsp和servlet模板代码的方法
- js简单登录弹窗
- js实践
- JavaScript 计时
- BZOJ-1012[JSOI2008]最大数maxnumber 线段树区间最值
- BZOJ-1012[JSOI2008]最大数maxnumber 线段树区间最值
- xUtils解析json数据
- Day 26: TogetherJS —— 让我们一起来编程!
- Day 23:使用 TimelineJS 构建精美的时间轴
- js小时分钟控件--
- JavaScript动态加载CSS和JS文件