jQuery的上窗口滚动动画背景图像位置 [英] jQuery on window scroll animate background image position

问题描述

我想实现使用jQuery滚动效果。我有一个背景的div设置为100％的浏览器窗口大小溢出隐患。这有一个大的背景图片是约。 1500px点¯x2000像素。

I am trying to achieve a scrolling effect using jQuery. I have a background div set to 100% browser window size with overflow hidden. This has a large background image that is approx. 1500px x 2000px.

，当用户向下滚动页面的滚动距离的百分比的背景图像的移动，因此对于每200像素向下滚动页面中的图像的移动在相同的方向10px的我想的效果是

The effect I want is when the user scrolls down the page the background image moves at a percentage of the scrolled distance, so for every 200px scrolled down the page the image moves 10px in the same direction.

任何人都可以点我在正确的方向？这甚至可能？ ：）提前非常感谢

Can anyone point me in the right direction? Is this even possible? : ) Many thanks in advance.

更新

之后，我对奥的斯@Capt的建议，试图改变，但我仍然在努力的code我与玩弄如下：

I have since tried variations on the suggestion by @Capt Otis but I'm still struggling the code I am playing around with is as follows:

$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        $('#div').animate({'background-postion': '+=10px 0'}, 500);
    }
});     

任何人都可以摆脱任何轻什么，我做错了什么？

Can anyone shed any light on what I am doing wrong?

推荐答案

在这里你去。背景设定为10％，滚动。您可以通过在code更改10更改背景滚动速度。

Here you go. Background is set to 10% scroll. You can change the background scroll rate by changing the 10 in the code.

CSS

html, body{
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
}
.bg{
    width:100%;
    height:100%;
    background: #fff url(..) no-repeat fixed 0 0;
    overflow:auto;
}

<div class="bg">
   <span>..</span>
</div>

的JavaScript

$('.bg').scroll(function() {
    var x = $(this).scrollTop();
    $(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px');
});

检查工作的例子在 http://jsfiddle.net/Vbtts/ 结果
点击此链接全屏例如： http://jsfiddle.net/Vbtts/embedded/result/

这篇关于jQuery的上窗口滚动动画背景图像位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！