시차 스크롤링, 각 클래스의 루프 스크립트

Question

나는 전체 건물 주제에 새로운 것이고 나는 코드 조각으로 고생하고있다.

여기에 문제가 있습니다. 시차 이미지가 스크롤되지 않는 것을 제외하면 모든 것이 올바르게 작동하고로드됩니다. 이제 첫 번째 이미지 만 스크롤하고 나머지는 고정되어 있기 때문에 각 대상 ID에 대해 스크롤 효과를 재설정하고 싶습니다.

그래서 올바른 경우 어떻게 든 각 div에 대한 이미지 위치를 재설정해야합니다.

귀하의 도움에 감사드립니다.

최저

/프레드릭

HTML 마크 업 :

<div class="parallaxbox" id="pb" style="background-image: url('');"> 
      <h1><?php the_title(); ?></h1> 
     </div> 

JS :

function parallax() { 
    setpos("#pb"); 
} 



function setpos(element, factor) { 
    factor = factor || 1.5; 

    var offset = $(element).offset(); 
    var w = $(window); 

    var posx = (offset.left - w.scrollLeft())/factor; 
    var posy = (offset.top - w.scrollTop())/factor; 

    $(element).css('background-position', '100% '+posy+'px'); 

} 

$(document).ready(function() { 
    parallax(); 
}).scroll(function() { 
    parallax(); 
}); 

CSS : 그것은 문제 같은 소리

.parallaxbox { 
    position: relative; 
    background: #444; 
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center; 
    z-index: -1; 
} 

Answer 1

당신의 jQuery 선택기입니다. ID 선택기 $("#pb")을 사용하면 ID가 'pb'인 DOM에서 찾은 첫 번째 요소 만 반환되므로 시차 효과가 다른 요소에 적용되지 않는 이유가 설명됩니다. 여러 요소와 일치해야하는 경우

당신과 같이, jQuery의 클래스 선택기를 사용한다 :

function parallax() { 
    setpos(".parallaxbox"); 
} 

예를 jsfiddle

에게 근무