Question

我创建了一个视差效果，如下所述： Is there a way to make parallax work within a DIV

这种方法效果很好，但我遇到了问题。我的页面基本上由交替的DIV组成。白色DIV与文本和DIV与其中的图片，与视差效果一起移动。这非常有效，除非我必须手动调整每张图片DIV的位置。以下是标题中的代码：

    <script type="text/javascript">
    $(window).scroll(function () {
        parallax();
    });
    function parallax() {
    var ev = {
        scrollTop: document.body.scrollTop || document.documentElement.scrollTop
    };
    ev.ratioScrolled = ev.scrollTop / (document.body.scrollHeight - document.documentElement.clientHeight);
    render(ev);
    }
    function render(ev) {
    var t = ev.scrollTop;
    var y = Math.round(t * 2/3) - 100;
    $('#ff-section01').css('background-position', 'center ' + y + 'px');
    $('#ff-section03').css('background-position', 'center ' + (y - 1000) + 'px');
    $('#ff-section05').css('background-position', 'center ' + (y - 1700) + 'px');
    $('#ff-section07').css('background-position', 'center ' + (y - 2750) + 'px');
    }
    </script>

如您所见，每个部分在底部的背景位置值中得到另一个垂直位置。 0,1000,1700,2750。到目前为止，这种方法效果很好，但只要中间文本DIV的高度发生变化，此方法就不起作用，因为值总是从页面顶部计算出来。一个部分的HTML如下所示：

<div class="ff-section03" id="ff-section03"></div>

非常简单，并结合CSS：

.ff-section03 {
    width: 100%; height: 550px;
    position: relative;
    background: url('system/urbansolutions.jpg') center -300px no-repeat;
}

也很简单。我该怎么办，计算不依赖于页面高度？我基本上不想从背景位置减去一个表面数字，这样视差效果就可以了，而不依赖于网站上的位置。

非常感谢！塞巴斯蒂安

个别DIV的视差效应调整

0 个答案: