jquery滚动效果插件ScrollMe

 查看演示  website  立即下载

使用方法

引入核心文件

<script src="http://www.jq22.com/jquery/jquery-1.10.2.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轴数值

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

PREVIOUS:
NEXT:
jQuery兼容移动端相册幻灯片插件PhotoSwipe v4.1.1
无级别树形菜单插件