div 배경 이미지 스크롤이 창 상단에 도달하면 속도가 느려집니다.

div가 창의 상단에 도달하면 div의 배경 이미지가 div 내부의 내용보다 느리게 스크롤되도록하고 싶습니다. 내가 말한 것을 구체적으로 보여주는 예를 온라인으로 찾을 수는 없습니다.div 배경 이미지 스크롤이 창 상단에 도달하면 속도가 느려집니다.

jQuery를 사용하여이 작업을 수행 할 수 있다고 가정하지만, jQuery와 잘 맞지 않으므로 정확히 무엇이 수반되는지는 알 수 없습니다.

출처

2013-08-29 user2439212

는 당신이 우리에게 당신이 시도 몇 가지 코드를 보여줄 수 있습니까? – ajtrichards

아직 아무 것도 시도하지 않았습니다. 나는 방금 설명한 정확한 효과를 둘러 보았지만 찾을 수는 없습니다. 나는 주로 jQuery로 그런 일을 할 수 있는지 묻는다. 내가 말했듯이, 나는 jQuery에 익숙하지 않아서 어떻게 그것에 대해 갈지 모른다. 사람들이 jQuery를 사용하여 내가 묻는 것과 비슷한 것으로 간주 될 수있는 일을한다는 것을 알고 있습니다. – user2439212

한 번 시차 플러그인을 사용하여 창과 다른 비율로 배경을 스크롤했습니다. 내용은 창으로 1 : 1로 스크롤되지만 다양한 배경 이미지가 더 빠르게 또는 더 빠르게 위 또는 아래로 스크롤되지만 그게 정확히 원하는지 확실하지 않습니다. 이것은 웹 사이트입니다 : http://www.stationx.ca 편집; 또한 예이 사이트는 디자이너를 거대한 비난합니다 –

내가 원하는 작업을 수행하는 코드를 함께 자갈로 묶었습니다.

여기 내 HTML입니다 :

<div class="post" id="post-1"> 

     <div class="post-background" id="post-background-1"> </div> 

     <div class="post-content" id="post-content-1" ></div> 

    </div> 

    <div class="post" id="post-2"> 

     <div class="post-background" id="post-background-2"> </div> 

     <div class="post-content" id="post-content-2" ></div> 

    </div> 

    <div class="post" id="post-3"> 

     <div class="post-background" id="post-background-3"> </div> 

     <div class="post-content" id="post-content-3" ></div> 

    </div> 

</div>

CSS의 :

.post {position:relative;} 
.post-background {position:absolute; top:0; left:0; width:100%; height:100%} 
.post-content {position:absolute; top:0; left:0;}

그리고 jQuery를 :

jQuery(window).scroll(function() { 
    var top = jQuery('.post').offset().top - jQuery(document).scrollTop();; 
    if (top < 0){ 
     var target = jQuery('.post').attr('id').match(/[\d]+$/); 
     jQuery('#post-background-' + target +'').css({ 
      'top' : (top/2.5)+"px", 'position' : 'fixed' 
     }); 
    } 
    if (top > 0){ 
     var target = jQuery('.post').attr('id').match(/[\d]+$/); 
     jQuery('#post-background-' + target +'').css({ 
      'top' : "0px", 'position' : 'absolute' 
     }); 
    } 
});

출처

2013-08-30 00:42:47 user2439212

div 배경 이미지 스크롤이 창 상단에 도달하면 속도가 느려집니다.

답변

관련 문제