向上和向下滚动Javascript上的动画

Question

Hey I am trying to replicate the on scroll animations on https://pixelgrade.com/demos/pile . I have tried ScrollMagic and Wow.js , but I am having great difficulty. I have found the vanilla code for detecting the direction in which the user is scrolling but that has some problems. If I set an on scroll listener, It would be animating every single thing on the page when the user scrolls. Any help would be appreciated , thank you.

Edit: I am referring to the image animations under the header. (The ones in a grid.)

Answer 1

I'm one of the Pile theme developers(the PHP one, unfortunately for you) and I can tell you that my colleague, Razvan Onofrei, created a jQuery plugin called Rellax inspired by the development of Pile2 .

With this library, you should be able to replicate Pile's behavior.

Answer 2

Block .item scroll 3x speed from scrollbar. Show in a full screen.

 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>