Как сделать div-слайд с прокруткой?

Question

Я хочу сделать div-слайд (в, из, влево, вверх, вправо или вниз), когда достиг определенного значения scrollTop(). Тем не менее, я не хочу, чтобы вызвать некоторые анимации ... Я хочу ДИВ двигаться со свитком, как эффект достигается здесь: 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 
     {}; 

Однако это не работает, потому что значение, которое мне удается установить, слишком низкое.

Сеть, которую я пытаюсь собрать, длинна, поэтому, когда я умножаю значение, оно слишком высокое или слишком низкое.

На сайте http://www.tioluchin.com/ Я хочу, чтобы эффект ножи и питание имеют

Answer 1

Я вошел в этот исходный код, потому что он сделал мне любопытно. Я нашел, как они это делают.

Первая часть догоняет, что происходит на свитке

$(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; 
    }