배경 이미지가 첫 번째 스크롤에서 점프합니다.

Question

내 배경 이미지에 대해 간단한 시차 효과를 만들기 위해 노력하고 있습니다. 모든 것이 작동하는 것 같지만 배경 이미지가 첫 번째 스크롤에서 점프 한 다음 작동합니다! 나는 그것이 점프 계속 이유를 알아낼 수 없습니다, 실시간 미리보기 : http://loai.directory/gallery

HTML :

<div class="topSection parallax"> 
     <div class="content"> 
     </div> 
     </div> 

CSS :

#page { 
    background-color: #3F8AE4; 
    padding-top: 80px; 
    text-align: left; 
} 

    /*Wrappers*/ 
    .wrapper { 
     background-color: #ffffff; 
    } 

    .wrapper.A { 
     background-color: #EDEDED; 
     border-top: 1px solid rgba(0,0,0,0.1); 
     border-bottom: 1px solid rgba(0,0,0,0.1); 
    } 

     /*Content Container*/ 
     .content { 
     width: 1024px; 
     padding: 50px 20px; 
     margin: auto; 
     overflow: hidden; 
     position: relative; 
     } 

    /*Top Section*/ 
    .topSection { 
     color: #fff; 
     background-color: #3F8AE4; 
     border-bottom: 1px solid rgba(0,0,0,0.1); 
     padding: 10px 0; 
    } 

.parallax { 
    background: url(../images/backgruond.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    padding: 150px 0; 
} 

JS :

// Y axis scroll speed 
var velocity = 0.5; 

function update(){ 
    var pos = $(window).scrollTop(); 
    $('.topSection').each(function() { 
     var $element = $(this); 
     // subtract some from the height b/c of the padding 
     var height = $element.height()-0; 
     $(this).css('background-position', '50%' + Math.round((height - pos) * velocity) + 'px'); 
    }); 
}; 

$(window).bind('scroll', update); 

Answer 1

귀하 background-position은 기본 CSS에 의해 center center으로 설정되어 있지만 스크롤을 시작하자마자 ing, 그것은 50% 50px ...으로 설정됩니다. 그래서 점프는 수직 위치가 중앙에서 계산으로 바뀜에 따라옵니다.

두 가지 방법에서이 접근, 중 단지로 초기 CSS를 설정할 수 있습니다

background: url(../images/backgruond.jpg) no-repeat 50% 50px fixed; 

당신이 그것이 스크롤을 시작으로 설정됩니다 위치가 있다는 것을 알고 있기 때문에,

또는 scroll에 추가하여 pageload에서 update() 함수를 호출하면 위치를 즉시 계산할 수 있습니다. 예를 들어

:

$(window).bind('scroll', update); 
update();