0712-2888027 189-8648-0214
微信公众号

孝感风信网络科技有限公司微信公众号

当前位置: 主页 > 技术支持 > Javascript/JQuery > ScrollMe一个用于向网页添加简单滚动效果的jQuery插件

ScrollMe一个用于向网页添加简单滚动效果的jQuery插件

时间:2019-10-31来源:风信网 点击:
通过使用ScrollMe插件,可以将静态的页面添加动态的效果,让页面整体动感起来,ScrollMe插件使用非常的简单,只需要在元素中添加属性即可。
 
Github地址:https://github.com/nckprsn/scrollme
 
引入核心文件:
 
<script src='js/jquery.scrollme.js'></script>
 
在html结构中添加属性,示例代码如下:
 
<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>
 
Options选项参数如下:
 
when
决定滚动的边界开始和结束,有三个参数:
 
enter:从容器的顶部进入视窗时退出
exit:从容器的底部进入视窗时退出
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轴数值
栏目列表
推荐内容
热点内容
展开