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

随着鼠标滚动而变化的滚动视差插件skrollr

动画 fishcity 4469浏览

滚动视差插件skrollr

skrollr是非常炫的视差滚动插件,它可以实现鼠标滚动时,页面的元素不断的变化,如渐现渐隐,从小变大,从不同的方向切入切出,也可以用来定位导航栏,让导航栏固定在某个位置。

skrollr是一个独立的JS库,skrollr的使用基本上不需要懂js,只需懂html和css就可以了,当然是要html5与css3。

skrollr体积非常小,只有12k,支持移动设备(IOS,Android等)。

jquery实例讲解:skrollr的使用方法:

载入文件,并初始化插件

 <script type="text/javascript" src="skrollr.min.js"></script>
 <script type="text/javascript">
    var s = skrollr.init();
 </script>

下面有两种方法来实现动画效果

1、使用data-属性来实现

<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>

data-0,data-500中0与500的值是指视窗滚动的数值,整个代码的意思为视窗从0滚动到500的时候,div元素的背景色由rgb(0,0,255)变化到rgb(255,0,0),并从0度旋转到360。

2、使用CSS来实现

#foo {
    -skrollr-animation-name:animation1;}
    
@-skrollr-keyframes animation1 {
    0 {
        left:100%;
    }

    2000 {
        left:0%;
    }

    top {
        color:rgb(0,0,0);
    }

    bottom {
        color:rgb(255,0,0);
    }}
<div id="foo"></div>

以上的代码就想当于

<div id="foo" data-0="left:100%;" data-2000="left:0%;" data-top="color:rgb(0,0,0);" data-bottom="color:rgb(255,0,0);"></div>

CSS样式可以自己发挥,觉得怎样好看就怎样写,要注意的是动画名称的定义,本例是animation1,更多的实例请参考实例源码或是查看官方文档

转载请注明:jQ酷 » 随着鼠标滚动而变化的滚动视差插件skrollr

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