スクロールすると要素が動いた感じの表現

Question

下記サイトのようなスクロールすると要素が動いた感じの実装をしたいのですが、
どうなってるのかわかりません。。。
どなたかご教授ください。。。
https://201d.jp/
リンク内容
https://www.prored-p.com/
リンク内容

Answer 1

どちらのサイトもやっている事は同じでスクロールしたタイミングで transform プロパティを使って、要素位置をずらしていますね。
開発者ツールでDOMツリーを見ると、分かります。

transform: translate3d(0px, -800px, 0px);

• transform - CSS | MDN
• translate3d() - CSS | MDN

Re: TSUTAYA さん

Comments

[TSUTAYA]

ありがとうございます。
そこは理解してるのですが、
jsでそれをどう実現すればいいのか分からないのです…

[think49]

addEventListener で scroll イベントを捕まえて、transform プロパティを変更すればいいのでは。

> そこは理解してるのですが、
あなたが「分かっていること」を私は知りません。
既知の内容は全て質問文に含めて、「分からない内容」をより限定的にすべきと思います。

[TSUTAYA]

大変失礼しました。
その変更の仕方はどうすればいいのでしょうか…

[think49]

element.style を書き換えます。
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/style