背景滚动视差的一个页面[仿雅虎邮箱主页]_新通道网站滚动背景怎么做的-CSDN博客

本文链接：https://blog.csdn.net/ul646691993/article/details/47686023

自己打算以后可以把这个作为自己官方网站设计的一个标准，雅虎这个界面的网址是https://cn.overview.mail.yahoo.com，然后自己仿照这个做了一个。

一开始很多问题，注意要加上

backgroung-attachment: fixed
这样才会没有问题了。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=divice-width,initial-scale=0.85,user-scalable=no,maximum-scale=0.85">
    <title>梦想不止步</title>
    <style>
        * html{
            background-attachment:fixed;
        }
        .div1{
            background-image: url("images/image1_large.jpg");
            background-size: 1800px;
            background-repeat: no-repeat;
            background-position: 0% -520px;
            background-attachment: fixed;
            /*最终自己加上了这句话终于成功了*/
        }
        .div2{
            background-image: url("images/image5_large.jpg");
            background-size: 1800px;
            background-repeat: no-repeat;
            background-position: 0% -720px;
            background-attachment: local ;
        }
        .div3{
            background-image: url("images/image3_large.jpg");
            background-size: 1800px;
            background-repeat: no-repeat;
            background-position: 0% -720px;
            background-attachment: local ;
        }
        .div4{
            background-image: url("images/image4_large.jpg");
            background-size: 1800px;
            background-repeat: no-repeat;
            background-position: 0% -720px;
            background-attachment: local ;
        }
        .div5{
            background-image: url("images/image2_large.jpg");
            background-size: 1800px;
            background-repeat: no-repeat;
            background-position: 0% -720px;
            background-attachment: local ;
        }
        *,body{
            padding: 0;
            margin: 0;
            font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        }
        .dialog{
            width: 100%;height:160px;text-align: center;padding-top: 80px;background-color: #00BFFF;
        }
        .show{
            width:100%;height: 400px
        }
    </style>
</head>
<body>
<div style="width: 100%;height:160px;text-align: center;padding-top: 80px;background-color: #00BFFF;">
    <h1 >这只是一个简单的尝试</h1>
</div>
<div style="width:100%;height: 400px" class="div1" id="div1"></div>

<div class="dialog" style="background-color: #00EE00">
    <h1 >这只是一个简单的尝试</h1>
</div>
<div class="show div2" id="div2"></div>

<div class="dialog" style="background-color: #FF00FF">
    <h1 >这只是一个简单的尝试</h1>
</div>
<div class="show div3" id="div3"></div>

<div class="dialog" style="background-color: #EE7621">
    <h1 >这只是一个简单的尝试</h1>
</div>
<div class="show div4" id="div4"></div>

<div class="dialog" style="background-color: #B23AEE">
    <h1 >这只是一个简单的尝试</h1>
</div>
<div class="show div5" id="div5"></div>
<!--<div style="width:100%;height: 300px;background-color: #444444">-->
<!---->
<!--</div>-->
<script>
    window.onload=function(){
        var i=0;
        var fix=0;
        var div1=document.getElementById("div1");
        var div2=document.getElementById("div2");
        var div3=document.getElementById("div3");
        var div4=document.getElementById("div4");
        var div5=document.getElementById("div5");
        var scrolltop1d=div1.style.backgroundPosition;
        var scrolltop2d=div2.style.backgroundPosition;
        var scrolltop3d=div3.style.backgroundPosition;
        var scrolltop4d=div4.style.backgroundPosition;
        var scrolltop5d=div5.style.backgroundPosition;
        var scrolltop1s;
        var scrolltop2s;
        var scrolltop3s;
        var scrolltop4s;
        var scrolltop5s;
        window.onscroll=function(){
            var scrolltop = document.documentElement.scrollTop||document.body.scrollTop;//上滑了的距离，为了体现兼容加一点东西
            var scrolltop1=((scrolltop-520))*0;
            var scrolltop2=((scrolltop-560*0.4)-720)*0.95;
            var scrolltop3=((scrolltop-560*1.7)-720)*0.95;
            var scrolltop4=((scrolltop-560*2.9)-720)*0.95;
            var scrolltop5=((scrolltop-560*3.9)-720)*0.95;
            if(scrolltop1<0) {
                for (i = 0; i < 1000; i++) {
                    scrolltop1s = scrolltop1d + (scrolltop1 - scrolltop1d) / 1000 * i;
                    div1.style.backgroundPosition = "0% " + scrolltop1s + "px";
                }
            }
            if (scrolltop2 > -720 && scrolltop > 200) {
                for(i=0;i<1000;i++) {
                    scrolltop2s=scrolltop2d+(scrolltop2-scrolltop2d)/1000*i;
                    div2.style.backgroundPosition = "0% " + scrolltop2s + "px";
                }
            }
            if (scrolltop3 > -720) {
                for(i=0;i<1000;i++) {
                    scrolltop3s=scrolltop3d+(scrolltop3-scrolltop3d)/1000*i;
                    div3.style.backgroundPosition = "0% " + scrolltop3s + "px";
                }                }
            if (scrolltop4 > -720) {
                for(i=0;i<1000;i++) {
                    scrolltop4s=scrolltop4d+(scrolltop4-scrolltop4d)/1000*i;
                    div4.style.backgroundPosition = "0% " + scrolltop4s + "px";
                }
            }
            if (scrolltop5 > -720) {
                for(i=0;i<1000;i++) {
                    scrolltop5s=scrolltop5d+(scrolltop5-scrolltop5d)/1000*i;
                    div5.style.backgroundPosition = "0% " + scrolltop5s + "px";
                }
            }
            scrolltop1d=scrolltop1;
            scrolltop2d=scrolltop2;
            scrolltop3d=scrolltop3;
            scrolltop4d=scrolltop4;
            scrolltop5d=scrolltop5;
        }

    }
</script>
</body>
</html>