Skrollr奇妙的视差滚动效果_3D_页面滚动_滚动_parallax

Skrollr不需要jQuery库，它可以让我们给任意元素设置关键帧的CSS属性，然后它会自动形成动画效果。该视差滚动插件主流浏览器，并且兼容手机等移动终端。

淘建站为您提供更多_3D_页面滚动_滚动_parallax，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 326 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：3D > 视差难易程度：高级

HTML

<div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
<div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
<div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>

<div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div>

<div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);">
    <h1>使用parallax创建视差滚动效果页面</h1>
    <h2><a href="http://www.sucaiq.com/js/152.html">查看教程</a></h2>
    <p>请向下滚动页面看效果</p>
    <p class="arrows">▼ ▼ ▼</p>
</div>

<div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1600="" data-1700="transform:scale(5) rotate(3240deg);opacity:0;">
    <h2>变形转换transform</h2>
    <p>任意页面元素的比例、倾斜、角度变换。</p>
</div>

<div id="properties" data-1700="top:100%;" data-2200="top:0%;" data-3000="display:block;" data-3500="top:-100%;display:none;">
    <h2>各种属性值设置</h2>
    <p>宽度、高度、间距、字体大小...</p><br/>
</div>


<div id="end" data-3500="top[cubic]:100%;border-radius[cubic]:0em;background:rgb(0,50,100);border-width:0px;" data-4000="top:10%;border-radius:2em;background:rgb(190,230,255);border-width:6px;">
    <h2>The End</h2>
    <p>感谢您关注.</p><br/>
</div>

引入skrollr.min.js插件：

<script src="js/skrollr.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="js/skrollr.ie.min.js"></script><![endif]-->

调用skrollr：

var s = skrollr.init({
    //edgeStrategy: 'set',
    easing: {
      WTF: Math.random,
      inverted: function(p) {
        return 1 - p;
      }
    }
});

提示：压缩包里其他4种简单的视差效果。