【素敵にマジック】スクロールさせながら円形にフェードイン・アウトさせる

　こんにちは！　今回ご紹介するのはこれ！
再生させているムービーからスクロールをかけると「円状に段々と大きさに変化がおきる」エフェクトです。このアピールの仕方は、とても気にいっています。😍

ムービーを使うと、印象度が増す

　最近のWebサイトには、トップに動画を用いたものが多くなりましたね。
静止画に比べると、動画を利用すると表現力が向上し、さらにjQueryを使い表示操作をさせることによって、格段と印象を深めるのに役立てられるのではないでしょうか？

上下にスクロールすると・・・

ムービー再生ができない場合は、静止画が表示されます。

💻📲　ben1099url.starfree.jp/0038.html　( DEMO )

ムービーの再生ってどうすればいいの？

・ムービーの再生方法

　ムービーの再生方法はいたって簡単です。HTMLに「video」タグを指定するだけで再生出来ちゃいます。🎥

<video src=”xxxx.mov” autoplay muted loop poster=”xxxx.jpg”>

・src　　ムービーファイル名
・autoplay　自動再生
・muted　消音
（ムービーには音声が含まれている場合があるので、不快にならない為にも指定はしておいた方が無難です）

・loop　動画のループ再生
・poster　動画が再生されない場合のサブ画像 (picture画像）
（ブラウザ等でサポートされていない場合に代わりに表示させるためのもの）

動画（静止画）をスクロールさせる毎に表示面積を変える

・動画を再生させるブロックの要素 ” .banner” のCSSをposition:fixed;にし、clip-pathを900pxの円状にして固定。
・videoタグの要素 ” .banner video ” のCSSをposition: absolute;にし、object-fit:cover; にて画像をトリミングさせています。

縦横比を維持したまま指定内に埋めたい時は、 object-fit:cover を使うと、画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、指定値からはみ出した部分はトリミングされます。

・テキスト部の要素 class=”container” のCSS をmargin-topで動画の要素下まで下げて調整します。

・jQueryにて動画サイズの値をscrollYの値から引いて、clip-pathの画像のpx値を変化させます。
（スクロール値によってpathのpx値が変化）