jquery滚动效果插件ScrollMe

所属分类:媒体,UI-滚动

 7388  64  查看评论 (4)
jquery滚动效果插件ScrollMe ie兼容10

使用方法

引入核心文件

<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轴数值

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


相关插件-滚动

jQuery滚动堆叠插件jquery.stacked-strips.js

为您的一页滚动网站和单页应用程序创建堆叠滚动效果。当您向下滚动网页时,插件可以逐个滚动固定的页面部分。
  滚动
 3888  25

jQuery单页滚动插件pagePiling.js

pagepiling.js是一个可以创建类似窗帘滚动网站的jQuery插件。它是灵活的,旧的浏览器和触摸设备兼容。您可以在原来的滚动的网站的基础上使用这个插件创建一个。
  滚动
 32750  150

jquery单页整屏滚动

搜狗浏览器功能向导页面滚动效果代码
  滚动
 27811  215

兼容IE的滚动条

兼容IE6的滚动条,使用方便,大小只有9K。
  滚动
 12768  97

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    seny 0
    2016/12/29 13:12:50
    个人感觉,如果滚动到某个节点时,头部的选中效果也跟随改变的话,会好一点。 回复
    帅气小小琦 0
    2016/12/2 21:12:22
    这个跟wow.js有什么差别呢
        0
        2017/7/7 11:03:59
        差别就是wow.jsk人能首次有动画效果,再进入时就不出现动画效果了。而这个无论什么时候进入都有动画效果
    回复
    LookMeme 0
    2016/12/1 23:12:08
    不错,效果很棒 回复
取消回复