Question

我写了一个脚本，当你向下滚动时改变了BG的位置，它对左右两个位置有效但我似乎无法达到允许我对背景位置顶部或底部进行视差的语法 - 而不是右边然后离开了。

这是我的代码：

function parallax(){
    var scrolled = $(window).scrollTop();
    $('section.intro .custombg').css('background-position',(scrolled * -0.2) + 'px');}
    $(window).scroll(function(e){
        parallax();
    });
}

Answer 1

css属性background-position有两个值，＃horizontal #vertical。请参阅：http://www.w3.org/wiki/CSS/Properties/background-position

考虑类似的事情：

function parallax(){
    var scrolledTop = $(window).scrollTop();
    var scrolledLeft = $(window).scrollLeft();
    $('section.intro .custombg').css('background-position',(scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');}
    $(window).scroll(function(e){
        parallax();
    });
}

此外，这似乎每次调用视差方法时都会添加滚动事件。要纠正此问题，您可以尝试：

function parallax(top, left) {
    $('section.intro .custombg').css('background-position',(left * -0.2) + 'px ' + (top * -0.2) + 'px');}
} // end function

$(document).ready(function() {
    $(window).scroll(function(e) {
        parallax($(window).scrollTop(), $(window).scrollLeft()); // call the method
    });
});

Answer 2

试

function parallax(){
    var scrolled = $(window).scrollTop();
    $('section.intro .custombg').css('background-position','center ' + (scrolled * -0.2) + 'px');}
    $(window).scroll(function(e){
        parallax();
    });
}

Answer 3

这是错的，每次使用$（window）.scroll（）时都要设置一个事件处理程序。你只需要这样做一次。试试这个。

var scrolledTop,
    scrolledLeft,
    background_position,
    $custom_bg;


function parallax(){
    scrolledTop = window.scrollY,
    scrolledLeft = window.scrollX,
    background_position = (scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');

    console.log('background_position', background_position);
    $custom_bg.css('background-position', background_position);
}

$(function() {

    $custom_bg = $('section.intro .custombg');


    $(window).on('scroll', parallax);


});

Answer 4

如果您希望通过视差做更多事情并更改其他属性，我强烈推荐使用Skrollr库（https://github.com/Prinzhorn/skrollr）。

滚动时几乎可以改变任何CSS属性，为您提供的选项多于背景位置或其他内容。它可能不仅仅是你在寻找，但它非常轻巧，并且也有移动支持（如果没有完善的库，你可能会遇到麻烦）。希望它有所帮助！

例如，如果要移动背景图像的背景位置，则可以执行以下操作：初始化skrollr（在这种情况下没有选项，但你可以设置参数）

    <script type="text/javascript">
    var s = skrollr.init();
    </script>

然后，您可以使用简单的数据标签告诉Skrollr您想要制作哪些元素以及您不想要哪些元素。在您的情况下，您可以做一些模糊的事情，如下所示：

（你想要使用视差的任何元素）

<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">
    WOOOT
</div>

但是，您要将背景颜色换成背景位置

<div data-0="background-position: 0px 0px" data-700="background-position: 0px 100px">       </div>

或

<div data-0="background-position: top center" data-700="background-position: bottom center">       </div>

您可以使用任何已接受的CSS background-position关键字。

<强>有用： https://github.com/Prinzhorn/skrollr

顶部而非右侧的视差背景图像

4 个答案: