纯CSS实现天猫店常用的滚动视差效果

本文参考于http://imweb.io/topic/5b73ef73a56e07401e48729d  感谢大牛的分享

上方背景图位置固定，不随着滚动条变化的效果在天猫店的页面中能时长见到。第一次看到这个效果的时候还是非常惊讶的，有虎躯一震的感觉。今天我们通过css的background-attachment: fixed属性，来实现这个功能。

 

上代码。

    <style>
        div{
            height: 100vh;
            color: #fff;
            font-size: 300px;
            text-align: center;
        }
        .title{
            background-color: #aaa;
        }
        .lp-img{
            background-attachment: fixed;
            -webkit-background-size: over;
            background-position: center center;
        }
        .img1{
            background-image: url(imgs/lp1.webp);
        }
        .img2{
            background-image: url(imgs/lp2.webp);
        }
        .img3{
            background-image: url(imgs/lp4.webp);
        }
    </style>


<body>
    <div class="title">Top</div>
    <div class="lp-img img1"></div>
    <div class="title">hello</div>
    <div class="lp-img img2"></div>
    <div class="title">world</div>
    <div class="lp-img img3"></div>
    <div class="title">bottom</div>
</body>

先是通过height: 100vh;让每个盒子占满屏幕

然后 background-attachment: fixed;属性是让图片固定在这个视口里面。造成滚动条滑动图片位置固定的视觉效果。

最终代码实现如下图所示：

https://github.com/obamarx/rollingView  代码

https://obamarx.github.io/rollingView/   页面呈现

我是奥巴马克思，我们下期再见。

 

posted @ 2018-08-28 20:53  奥巴马克思  阅读(167)  评论(0)  编辑  收藏  举报