視差途中のページ

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のテキストを作成し、25dpiの80pxのコールを背景色と下端の境界線で作成しました。スクロール速度の違いを確認できます。私はそれらを生成するためにカミソリと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> 

私は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(...)イベントも作成することができますが、それらは1つのブラウザから次のブラウザに非常に厄介な傾向があります。これでもいくらか不快感があります。スクロールイベントを嫌うのは難しいことです。