スクロールに応じて、動画の再生・動画を画面幅全体に広げる・テキストを表示させるやり方

Question

前提・実現したいこと

スクロールに応じて、動画の再生・動画を画面幅全体に広げる・テキストを表示させる為に、これをこうすればこうなるという理由を教えていただきたいです。

このようなサイトの動きをさせたいです。
https://www.dji.com/jp/mavic-air-2?gclid=CjwKCAiAzNj9BRBDEiwAPsL0d9fVkRSkqHtDSTS9nT3utPnRjF7KpUT7yJzchroEJLNIOt7CxiUXYRoC4MoQAvD_BwE
よろしくお願いいたします。

Answer 1

参考ページで使ってるのはReactっぽいですね
しかしReactがアニメーション処理に
直接的に関わってるってことはないでしょう

動き方から見るに多分cssトランジションを主に使ってるように思います

であれば、ブラウザで要素詳細表示をすればどのように
その表現を実現しているかの大半を見ることができるはずです

あとはヒント的な

スクロールに合わせて要素を処理をするにはとりあえず
windowのscrollイベントでやりますが
座標の情報はこのイベントの値を利用するより
各要素のgetBoundingClientRectを使った方がスムーズです

またアニメーションはjsでガリガリ書くよりcssトランジション・アニメーションで
処理する方向でやったほうがレスポンシブ対応もしやすく取り回しが効きます

jQueryのアニメーションを使うとイージングは面白いものを使えますが
視覚表現に関わるコードがcssとjsに散らばって管理が面倒になります

Reactでアニメーションは結構Reactに慣れてないと厳しいです
何がコンポーネントを通して共有され、何がマウント毎に異なるのか
どこまでDOMオブジェクトは同一なのかとか
その辺把握してないとReactでアニメーションするのはキツいです

Reactでやる場合は特にアニメーションは
cssトランジション・アニメーションを軸にするようにしましょう

Comments

[sh8888]

はじめまして。
質問を丸投げしたにも関わらず、とても丁寧な回答をしていただき、誠にありがとうございます。
今後とも、ご教示いただければ幸いです。
ありがとうございました。