Как применить эффект параллакса в относительном DIV

Question

Я пытаюсь изменить этот пример параллакса http://jsfiddle.net/aloisdg/WT8zX/, сделанный skeurentjes.

Моя проблема заключается в том, что она автоматически позиционирует изображение по адресу top:0 Как разместить изображение параллакса в относительном div ниже страницы?

Answer 1

Спасибо, ребята! Вот рабочий код.

HTML:

<div class="object-holder"> 
     <div class="parallax-image">hi</div> 
</div> 

CSS:

.object-holder { 
    height: 500px; 
    width: 500px; 
} 

.parallax-image { 
    background: url("myimage.jpg") no-repeat; 
    background-size: 100% auto; 
    width: 500px; 
    height: 500px; 
    z-index: -1 

} 

JS:

$(window).scroll(function(e){ 
    parallax(); 
}); 

function parallax(){ 
    var scrolled = $(window).scrollTop(); 
    $('.parallax-image').css('background-position-y', (scrolled*-0.9)+'px'); 
} 

Answer 2

* edit: Только что понял, что фон в оригинале абсолютно позиционирован.

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

Создайте еще один div и разместите его в потоке страницы, придайте ему класс, что-то вроде relative-background.

Затем измените JQuery на:

$(window).scroll(function(e){ 
    parallax(); 
}); 

function parallax(){ 
    var scrolled = $(window).scrollTop(); 
    $('.relative-background').css('background-position', 'center' -(scrolled*0.15)+'px'); // changing the class here 
} 

Вы можете настроить значение 0,15, и, возможно, добавить смещение в процентах от высоты документа, так что это только для движущейся части страницы.