アニメーションスクロールアップ/ダウンJavascript

Question

ちょっと私はスクロールアニメーションをhttps://pixelgrade.com/demos/pileに複製しようとしています。私はScrollMagicとWow.jsを試しましたが、大きな困難を抱えています。私はユーザーがスクロールしている方向を検出するためのバニラコードを見つけましたが、それにはいくつかの問題があります。スクロールリスナーを設定すると、ユーザーがスクロールするときにページ上のすべてのものをアニメーション化します。助けていただければ幸いです。ありがとうございます。

編集：ヘッダーの下にある画像のアニメーションを参照しています。

Answer 1

私はPileのテーマ開発者の1人です（PHPの方は残念ですが）、私の同僚、Razvan Onofreiが、Rellaxというインスピレーションを受けたjQueryプラグインを作成したと伝えます。 Pile2の開発。

このライブラリでは、Pileの動作を再現できるはずです。

Answer 2

ブロック.itemスクロールバーから3倍のスピード。フルスクリーンで表示する。

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>