Animation auf Scroll Up und Down Javascript

Question

Hey Ich versuche, die auf Scroll-Animationen auf https://pixelgrade.com/demos/pile zu replizieren. Ich habe ScrollMagic und Wow.js ausprobiert, aber ich habe große Schwierigkeiten. Ich habe den Vanilla-Code gefunden, um die Richtung zu erkennen, in der der Benutzer scrollt, aber das hat einige Probleme. Wenn ich einen On-Scroll-Listener einstelle, würde es jedes einzelne Ding auf der Seite animieren, wenn der Benutzer scrollt. Jede Hilfe wäre willkommen, danke.

Edit: Ich beziehe mich auf die Bildanimationen unter der Überschrift. (Die in einem Raster.)

Answer 1

Ich bin einer der Stapel-Theme-Entwickler (die PHP-Version, leider für Sie) und ich kann Ihnen sagen, dass mein Kollege, Razvan Onofrei, ein jQuery-Plugin namens Rellax inspiriert die Entwicklung von Pile2.

Mit dieser Bibliothek sollten Sie das Verhalten von Pile replizieren können.

Answer 2

Block .item Scrollen Sie 3x Geschwindigkeit von Bildlaufleiste. Zeige im Vollbildmodus.

window.onscroll = function() { 
 
    var posTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; 
 
    
 
    document.getElementById('item').style.top = 1000 - parseInt(posTop * 3) + 'px'; 
 
}

body { 
 
    height: 200vh; 
 
    position: relative; 
 
} 
 

 
#item { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    top: 1000px; 
 
    background-color: red; 
 
}

<div id="item"></div>