滚动视差-03【模仿小米页面效果】

滚动视差-03【模仿小米×华为页面效果】

小米官方网站效果示例：https://www.mi.com/mi9pro【第四屏】

华为官方网站效果示例：https://consumer.huawei.com/cn/phones/nova5

以下是运用的插件【skrollr.js】参考网站

官方网站：http://prinzhorn.github.io/skrollr/

Github地址：https://github.com/Prinzhorn/skrollr

详细教程：https://www.jianshu.com/p/ffe6eb46bb8f(来自简书)

本案例是滚动视差最终的一个效果，也是自己接触滚动视差以来最想要的一个效果。话不多说，直接上代码。

一、搭建基本页面

<div id="easing_wrapper" data-0="display:none;"
     data-1000="display:block;"
     data-2900="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);"
     data-3900="background:rgba(0,0,0,1);color:rgb(255,255,255);"
     data-6000="top:0%;" data-12000="top:-100%;">
    <div id="easing" data-2900="left:100%" data-3500="left:25%;">
        <h2>easing?</h2>
        <p>sure.</p>
        <p>let me dim the <span data-3900="" data-4900="color[swing]:rgb(0,0,0);" data-5900="color:rgb(255,255,0);">lights</span> for this one...</p>
        <p data-5900="opacity:0;font-size:100%;" data-6500="opacity:1;font-size:150%;">you can set easings for each property and define own easing functions</p>
    </div>

    <div class="drop" data-3500="left:15%;bottom:100%;" data-5500="bottom:0%;">linear</div>
    <div class="drop" data-3500="left:25%;bottom[quadratic]:100%;" data-5500="bottom:0%;">quadratic</div>
    <div class="drop" data-3500="left:35%;bottom[cubic]:100%;" data-5500="bottom:0%;">cubic</div>
    <div class="drop" data-3500="left:45%;bottom[swing]:100%;" data-5500="bottom:0%;">swing</div>
    <div class="drop" data-3500="left:55%;bottom[WTF]:100%;" data-5500="bottom:0%;">WTF</div>
    <div class="drop" data-3500="left:65%;bottom[inverted]:100%;" data-5500="bottom:0%;">inverted</div>
    <div class="drop" data-3500="left:75%;bottom[bounce]:100%;" data-5500="bottom:0%;">bounce</div>
</div>

二、添加css样式

  .skrollable {
            position:fixed;
            z-index:100;
        }
        .skrollable .skrollable .skrollable {
            position:static;
        }
        .skrollr-mobile .skrollable {
            position:absolute;
        }

        .skrollable .skrollable {
            position:absolute;
        }

        html, body {
            width:100%;
            height:100%;
            padding:0;
            margin:0;
            overflow-x:hidden;
        }
        body {
            background: #eeeeee;
            background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%);
            background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%);
            background: -o-linear-gradient(top, #eeeeee, #cccccc 100%);
            background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%);
            background: linear-gradient(top, #eeeeee, #cccccc 100%);
            background-attachment:fixed;
        }
        #easing_wrapper {
            width:100%;
            height:100%;
        }
        #easing {
            top:10%;
            width:50%;
            z-index:101;
        }

        .drop {
            background:#09f;
            font-weight:bold;
            padding:1em;
        }

三、添加js效果

<script src="js/skrollr.min.js"></script>
<script>
    var s = skrollr.init({
        edgeStrategy: 'set',
        easing: {
            WTF: Math.random,
            inverted: function(p) {
                return 1-p;
            }
        }
    });
</script>