スクロールでdivスライドを作成するには？

Question

特定のscrollTop（）値に達すると、divスライド（イン、アウト、左、上、右または下）を作成します。しかし、私はそれはいくつかのアニメーションをトリガーにしたくない効果がここに実現のように...私は、divのスクロールで移動する：

： http://www.tioluchin.com/

これまでのところ、私が得た「最も近い」とは、本でした

var vistaEstandar = document.getElementById('vista'); 
vistaEstandar.onscroll = function() {animacionesEstandarVista()}; 
    function animacionesEstandarVista() 
    { 
     var ypos = vistaEstandar.scrollTop; 

     if (($(window).width() >= 1800 && vistaEstandar.scrollTop > 6053) || ($(window).width() > 1800 && document.documentElement.scrollTop > 6053)) { 
      var image= document.getElementById("seccion9textoSegundo"); 
      var toppin = ypos/6053; 
      image.style.top = toppin*150 + 'px'; 
     } 
     else 
     {}; 

しかし、私が設定した値が低すぎるため、これは機能しません。

私がまとめようとしているウェブは長いので、値を掛けると高すぎたり低すぎたりします。私はナイフと食べ物が

Answer 1

を持っている効果をしたいウェブサイトhttp://www.tioluchin.com/で

それは私が好奇心作られたので、私はそのソースコードに行ってきました。私は彼らのやり方を見つけました。

最初の部分は、彼らが小さな画面上でそれを無効にしますが、それはここでは重要ではありませんが条件を持っているスクロールに何が起こるか

$(document).scroll(function(){ 
    windowScroll() 
}); 

をキャッチされました。彼らはより多くの要素のために、それが大きいのはあり

function windowScroll(){ 
    var st = $(document).scrollTop(); 

    $("#aff").css({"top": 32 - st * 0.15 + "px"}); 
    $("#aff").css({"left": 48 - st * 0.15 + "px"}); 
} 

：

第二の部分はこれです。これが私の遊び場です。原則として、現在の位置をオフセットとして開始します。 "st"はあなたの奥行きを示しています。 st * 0.15は、要素が画面からどのくらい速く実行されるかを示します。

マイHTML：

<div class="wrapper"> 
<div id="aff" class="moving-div"> 

</div> 

とCSS：

.moving-div { 
    width: 3rem; 
    height: 3rem; 
    position: relative; 
    top: 2rem; 
    left: 3rem; 
    background: red; 
    } 

    .wrapper { 
    height: 1000px; 
    }