상대 DIV 내에서 시차 효과를 적용하는 방법

Question

skelentjes가 만든이 시차 예 http://jsfiddle.net/aloisdg/WT8zX/을 수정하려고합니다.

내 문제는 자동으로 이미지 위치를 지정하는 것입니다. 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

* 편집 : 원본의 배경이 절대적으로 배치되었음을 알았습니다.

이미지를 배경 이미지로 추가 한 다음 background-position을 사용하여 이미지를 이동하고 싶을 것입니다.

다른 div를 만들고 페이지의 흐름에 배치하고 상대적인 배경과 같은 클래스를 지정합니다. 당신은 0.15 값을 꼬집고 어쩌면 그것은 단지 페이지의 일부를 이동 그래서 문서 높이의 비율의 오프셋을 추가 할 수 있습니다

$(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 
} 

:

그런 다음에 jQuery를 변경합니다.