注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery简单滚动效果插件ScrollMe

动画 fishcity 2046浏览

jquery简单滚动效果插件ScrollMe

ScrollMe是一个页面添加简单的滚动效果jQuery插件,当你向下滚动页面时,ScrollMe可以对页面元素进行轴标扫描、旋转、转换和改变不透明度,从而让整个页面动感起来。ScrollMe非常容易使用,它不需要写JS代码,只需在元素中写上属性就OK了。

使用方法

引入核心文件

<script src='http://libs.useso.com/js/jquery/2.1.1/jquery.min.js'></script>
<script src='js/jquery.scrollme.js'></script>

写入html,所有的属性值都添加到元素中,scrollme自动获取属性值,就进行动画。

<div class="scrollme">
    <div
        class="animateme"
        data-when="enter"
        data-from="0.5"
        data-to="0"
        data-opacity="0"
        data-translatex="-200"
        data-rotatez="90"
    >
        Yup, that's all.
    </div>
</div>

选项

when:决定滚动的边界开始和结束,有三个参数:

1、enter:从容器的顶部进入视窗时退出

2、exit:从容器的底部进入视窗时退出

3、span:从容器的顶部进入视窗到底部进行视窗

from & to:指定滚动边界内动画的起始位置与结束位置,值为: 0 – 1

easing:设置动画的形式

"easeout": 缓冲淡出.

"easein": 缓冲淡入.

"easeinout": 淡出.

"linear": 无动画.

crop:是否限制滚动边界在文档边界内。值:true 和false

opacity:元素的透明度,值:0-1

scale, scalex, scaley & scalez:指定元素的坐标x,y,z的数值实现滚动动画效果

rotatex, rotatey & rotatez:指定元素在X,Y和Z轴的角度旋转数值。

translatex, translatey & translatez:指定的距离把动画元素沿X、Y和Z轴数值

各个参数的具体效果请动手体验,翻译过来的文字不能准确的表达到效果,请见谅。实例页面请注意右边几个不同颜色方块的变化。当然,更多的细节请参考官方文档

转载请注明:jQ酷 » jquery简单滚动效果插件ScrollMe

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。