Question

这是我在html，css和js中的代码（非常简化）：

<body>
    <div id="wrapper">
        <section id="first">
            <div class="background"></div>
            <div class="videoBackground"></div>
            <div class="content">
                <div id="titleGFS" class="title">Ipse eorum</div>
                <div id="txt1" class="text">Ipse eorum opinionibus accedo, qui Germaniae...</div>
                <div id="txt2" class="text">Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania...</div>
            </div>
        </section>

        <!-- other sections -->

    </div>
</body>

CSS：

    html,body{
        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;
    } 

    #wrapper{
        min-width: 1000px;
    }

    section{
        min-height: 100vh;
    }

    #first{
        color: whitesmoke;
        background: url('1.jpg') no-repeat center;
        background-size: cover;   
    }

    #first .background{
        background-image: none;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
        width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

JS：

/*Change background (I need it in this way)*/
$('#first').css({background:'none'});
$('#first .background').css({backgroundImage: "url('1.jpg')"});

/*Scrolling*/
$(window).scroll(function(){
    var $maxScroll=300;
    var $maxScale=1.3;
    var $x=$(window).scrollTop()/1000+1;
    if($(window).scrollTop()>$maxScroll) $x=$maxScale;
    $('#first .background').css({transform: 'scale('+$x+','+$x+')'});

我想要做什么：在页面向下滚动的同时缩放背景图像，缩放比例为1.3，背景必须保持固定位置。

它有效：我的意思是，当我滚动一点时，背景放大，好吧！然后它开始向下滚动......我无法理解为什么，我试图通过搜索到处寻找解释。

Answer 1

在你的滚动方法中，你用这一行播放背景：

 $('#first .background').css({transform: 'scale('+$x+','+$x+')'});

转换背景，即缩放它。注释或使用其他转换来查看差异。如果您不需要，请完全删除该行。

<强> __ UPDATE __

看看this fiddle。我更改了图片网址，如下所示：

$('#first').css({background:'none'});

/*Scrolling*/
$(window).scroll(function(){
    var $maxScroll=500;
    var $maxScale=1.3;
    var $x=$(window).scrollTop()/100+1;
    console.log("scrollTop : " + $(window).scrollTop() + "- x : " + $x);
    if($(window).scrollTop()>$maxScroll) $x=$maxScale;
//    $('#first .background').css({transform: 'scale('+$x+','+$x+')'});

        $('#first .background').css({transform: 'scale('+$x+','+$x+')'});

});

我在下面的行中也改为1000到100：

var $x=$(window).scrollTop()/100+1;

通过这种方式，我将划分（$ x）的值提高了，这有助于扩展更明显。

让我试着解释一下你的情况会发生什么：缩放是如此之小，以至于你很快就会遇到障碍。

在我的情况下，请注意控制台，缩放范围更大，因此我会越来越多地缩放图像。但是在超过500限制后，由于以下行，图像被缩小：

if($(window).scrollTop()>$maxScroll) $x=$maxScale;

其中$ x重置为$ maxScale（缩小），如果我继续滚动，它会再次开始放大。

现在有意义吗？

如何在滚动时缩放背景图像？

1 个答案: