上下而不是左右的视差背景图像

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有两个值，#horizo​​ntal #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

这是完全错误的，要设置每次使用$（窗口）.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的个关键字。

有用： https://github.com/Prinzhorn/skrollr