jQuery на прокрутке окна анимировать положение фонового изображения - PullRequest
Новая
       29

jQuery на прокрутке окна анимировать положение фонового изображения

19 голосов
/ 15 февраля 2011

Я пытаюсь добиться эффекта прокрутки с помощью jQuery.У меня фон div установлен на 100% размера окна браузера с переполнением скрыто.Это имеет большое фоновое изображение, которое составляет ок.1500px x 2000px.

Эффект, который я хочу получить, заключается в том, что когда пользователь прокручивает страницу вниз, фоновое изображение перемещается в процентах от расстояния прокрутки, поэтому при каждых 200 пикселях, прокручиваемых вниз по странице, изображение перемещается на 10 пикселей в том же направлении.

Кто-нибудь может указать мне правильное направление?Это вообще возможно?:) Заранее большое спасибо.

ОБНОВЛЕНИЕ

С тех пор я пробовал варианты на предложении @Capt Otis, но я все еще борюсь с кодом, с которым я играю, выглядит следующим образом: 

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

Может кто-нибудь пролить свет на то, что я делаю неправильно?

Ответы [ 6 ]

54 голосов
/ 21 февраля 2011

Вот, пожалуйста. Фон установлен на 10% прокрутки. Вы можете изменить скорость прокрутки фона, изменив 10 в коде.

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/

5 голосов
/ 01 мая 2013

Если вы не хотите возиться с дополнительным фоновым div, вот мой код, который я обернул из нескольких примеров: 

$(window).scroll(function () {
    setBackgroundPosition();
})
$(window).resize(function() {
    setBackgroundPosition();
});
function setBackgroundPosition(){
    $("body").css('background-position', "-" + (1920 - $(window).width()) / 2 + "px " + -(Math.max(document.body.scrollTop, document.documentElement.scrollTop) / 4) + "px");
}

Math.max требуется для кросс-браузерных проблемТакже замените '1920' на ширину фонового изображения 

body{
    background-image:url(images/background.jpg);
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
5 голосов
/ 14 марта 2012

Это сработало для меня:

В js: 

$(window).scroll(function() {
    var x = $(this).scrollTop();
    $('#main').css('background-position', '100% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 2) + 'px, center top');
});

В css: 

#main {
background: url(../img/img1.png) center top no-repeat, url(../img/img2.png) center top no-repeat, url(../img/img3.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, left top, center top;

Где #main это div, фоновое изображение которого я хотелпереехать.Не нужно иметь высоту: 100% для html, body.

Это вариант для нескольких фоновых изображений.

2 голосов
/ 19 февраля 2011

Это может сделать это: 

$(window).scroll(function(){
    $('#div').css("background-position",parseInt($(this).scrollTop()*0.05));
})
0 голосов
/ 17 февраля 2011

Я не думаю, что вы можете использовать + = или - =, когда у вас есть две части в CSS. Есть кое-что, что вы можете сделать, это немного сложно, но это работает: 

$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        var bgpos = $("#div").css("background-position");
        var bgposInt = 0;
        if(bgpos.indexOf("px")!=-1) {
            bgpos = bgpos.substr(bgpos.indexOf("px")+3);
            bgposInt = parseInt(bgpos.substr(0, bgpos.indexOf("px")));
        }
        bgposInt += 10;
        $("#div").animate({"background-position": "0 "+bgposInt+"px"}, 500);
    }
});

Этот код получает только второе число из background-position div (верхней позиции), преобразует его в int и увеличивает его на 10. Затем он просто анимирует div в новую позицию.

0 голосов
/ 15 февраля 2011

Посмотрите здесь , чтобы увидеть пример того, как далеко пользователь прокрутил страницу. Смотрите $(this).scrollTop()?

Вместо ссылки на $ (this), попробуйте использовать фоновый div. Затем используйте функцию .scroll, чтобы определить, на сколько нужно переместить фон.

Ваш код должен выглядеть примерно так: 

$("html").scroll(function{
  var move["bottom"] = $("bg_div").scrollTop();
  $("bg_div").animate({bottom: move}, 500);
});
...