在滚动的过程中使用视差滚动效果

我们在网页制作的过程中常常看见一些视差效果，比如：https://im.qq.com/，

这种视差效果的基础原理是利用了背景固定来操作的，即background-attachment：fixed，这个属性默认是scroll，即默认是滚动的

但是仅仅使用这个原理来制作视察效果是不够的，我们还需要使用stell.js，这个js文件是依赖于jQ的，所以我们在使用这个插件的时候需要下载两个js文件。

　　

<style>
        body{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100%;
            height: 500px;
        }
        div:first-child{
            background: url("images/1.jpg") no-repeat center / cover;
        }
        div:nth-child(2){
            background: url("images/2.jpg") no-repeat center/cover;
            /*通常情况下背景图片是默认会随着鼠标的滚动而滚动的*/
            /*但是当设置成了fixed之后北京就会固定在上面*/
            /*这个效果差就是视觉差的基础原理，这个固定也是必须加的*/
            /*background-attachment: scroll;*/
            background-attachment: fixed;
        }
        div:nth-child(3) {
            background: url("images/3.jpg") no-repeat center / cover;
        }
    </style>
</head>
<body>
    <div></div>
    <!--  这个属性是控制这个北进图片的滚动速度，这个数字越大速度越大，
    而且越接近1，速度与正常页面的滚动速度越接近  -->
    <div data-stellar-background-ratio="0.3"></div>
    <div></div>
</body>
<!--  这是需要导入的两个js文件以及自己定义的js文件  -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.stellar.js"></script>
<script src="js/index.js"></script>

　　下面是自己定义的js文件：

$(function () {
    /*1.引入*/
    /*2.结构   data-stellar-background-ratio="0.3"  样式 bg 需要 background-attachment: fixed;*/
    /*3.初始化插件*/
    $.stellar({
        horizontalScrolling: false,
        responsive: true
    });
});

　　这样就可以做出类似于QQ页面的视差效果了

 

posted @ 2020-10-29 16:46  coderLsq  阅读(117)  评论(0)    收藏  举报