こんにちは、制作担当のI.Sです。
今回は動画でのパララックス表示の方法について、ご紹介します。
※前々回の画像パララックスの動画バージョンとなります。
目次
1.実装例
2.解説
3.カスタマイズ
4.まとめ
1.実装例
See the Pen
B 動画パララックス by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
※右下の「Rerun」で何度も再生できます。
このように背景を動画で固定し、その上にコンテンツが入るような感じです。
画像パララックス同様、容易に実装できます。
2.解説
背景動画を固定する記述
まず、videoタグの親要素に「position: fixed;」で完全に固定します。
その後は位置調整をしていき、（今回は中央）Videoタグにも中央表示、
どのデバイスで見ても幅いっぱいに表示されるよう記述します。
これで完成です。
途中でコンテンツを挟む
See the Pen
B 動画パララックス 2 by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
こちらは途中でコンテンツを挟んでみたパターンです。
ただ、position: fixed;だと難しいので、「position: sticky;」を使います。
ここでは説明は省略しますが、分かりやすく言うなら「融通が利きやすくなったposition: fixed;」と言いましょうか。
気になる方はこちらの記事をご覧ください。
https://b-risk.jp/blog/2023/03/sticky/
この形式であれば別の動画も挟めます。
3.カスタマイズ
画像パララックスの時と同じで、各動画を連続して表示できます。
ただし注意点として「position: sticky;」を使用しています。
See the Pen
B 動画パララックス 3 by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
画像の時とはまた違った印象を受けるのではないでしょうか。
動画上にコンテンツを入れることによって、さらに見栄えが変化すると思います。
ただし、動画ファイル自体が重たいので多様は禁物です。
4.まとめ
ただ動画を入れるのではなく、背景動画を入れることにより、また違ったデザイン性が生まれると思います。ただ、動画を入れすぎるとサイトの表示速度に影響が出てしまいますので、あまり入れすぎないように。下層ページが少ない案件に採用するのが無難かと思います。
ではまた.
