fixed版 DOMとWebGLのスクロール一致サンプル

静止画のimg要素に、全面canvasのWebGLでエフェクトを加えています。
本実装方法はtransformアニメーション(CSS transition,animation)と相性が悪いようです。
(gsapのようにstyle属性を直接書き換える場合はズレなさそう?)

■fixed版の特徴
スクロールはブラウザの挙動を活かしてはいますが、厳密には異なるものになります。
固定表示のオブジェクトの配置が可能です。
アニメーションに正確なスクロール量が必要な場合に向いています。

absolute版はこちら

v2.0.2
X:@beffell


メモ こういう順序で処理されてるのかな・・・

レイアウト(CSS・style属性)
transform以外のCSS transition,animationの計算
requestAnimationFrame
microtask
transformのCSS transition,animationの計算
レンダリング(画面表示)
macrotask