시차 중순 페이지

Question

내 페이지의 중간에있는 요소에 시차 효과를 유발합니다. 내가 이것을 scrollTop()에 붙이면, 초기화 될 때 요소가 점프하게됩니다.

var feedPos = $(".feed").offset().top - 100; 

$(window).scroll(function(){ 
    if($(window).scrollTop() >= feedPos) { 
     $(".feed").css("top", 150 - $(window).scrollTop()/100); 
    } 
}); 

아이디어가 있으십니까?

Answer 1

이 줄을 따라 가면 도움이 될 것입니다.

html의 경우 텍스트로 80px의 100div를 만들고 배경색과 하단 테두리로 80px 전화를 25divs로 만들었으므로 스크롤 속도의 차이를 볼 수 있습니다. 나는 그들을 생성하기 위해 면도날과 함께 C# mvc를 사용했다. 그러나 당신은 그 div들을 잘 만들고 싶어한다.

<div id="container"> 
    <div class="fast"> 
     @for (var i = 1; i <= 100; i++) 
     { 
      <div>@i. This is row @i</div> 

     } 
    </div> 

    <div class="slow"> 
     @for (var j = 0; j < 25; j++) 
     { 
      var r = 255 - j; 
      var g = 127 + (int)(.5 * j); 
      var b = 10 + j; 
      <div class="color" style="background-color:rgb(@r, @g, @b)"></div> 
     } 
    </div> 
</div> 

CSS의 경우 scss를 사용하지만 다시 원하는 경우 CSS를 만들 수 있습니다.

#container { 
    height: 700px; 
    width: 250px; 
    overflow-y: hidden; 
    position: relative; 

    .fast { 
     position: absolute; 
     top: 0; 
     div {    
      height: 80px; 
      width: 100%; 
     } 
    } 

    .slow { 
     width:100%;   
     position: absolute; 
     top: 0; 
     div {    
      height: 80px; 
      width: 100%; 
      opacity: .3; 
      border-bottom:1px dotted white; 
     } 
    } 
} 

없이 자바 스크립트 :

var isAnimating = false; 
$(document).ready(function() 
{ 
    $('#container').on('DOMMouseScroll mousewheel', function (e) 
    { 
     if (!isAnimating) 
     { 
      isAnimating = true; 
      e.preventDefault(); 

      var delta = e.originalEvent.wheelDeltaY;     
      var $this = $(this); 

      console.log(delta); 


      var newFast = parseInt($this.find('.fast').css('top'), 10) + delta; 
      var newSlow = parseInt($this.find('.slow').css('top'), 10) + delta/4; 

      if (newFast > 0) 
       newFast = 0; 
      if (newSlow > 0) 
       newSlow = 0; 

      console.log(newFast + " | " + newSlow); 

      $this.find('.fast').animate({ top: newFast + 'px' }, 100); 
      $this.find('.slow').animate({ top: newSlow + 'px' }, 100, function() { isAnimating = false; }); 

     } 
    }); 

}); 

참고 :이 경우에만 처리 ​​마우스 휠 스크롤, 스크롤 막대를 끌 수 없습니다. 사실, 스크롤링 div를 만들지 않았으므로 스크롤하는 모든 부분이 바퀴에서 나옵니다. .scroll(...) 이벤트도 만들 수 있지만 한 브라우저에서 다음 브라우저로 매우 까다로운 경향이 있습니다. 이것조차도 약간의 불안감이 있습니다. 스크롤 이벤트를 망치는 것은 까다로운 일일 수 있습니다.