WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。
今回は弊社で作成した、[焼肉用のお肉ネット通販特設サイトのサンプルを使用しながら解説していきます。
初心者向けの記事です。
参考にするサンプルサイトはこちらから
サンプルサイト
動画再生
メインビジュアルで動画を再生させています。JSなどで再生させる方法もありますが、今回はCSSだけで対応してみます。
HTML
|
1 2 3 4 5 6 7 8 9 |
<section id="mainVisual"> <div class="video-wrapper"> <video muted loop playsinline autoplay poster="movie/mv.jpg"> <source src="movie/mv.webm" type="video/webm"> <source src="movie/mv.mp4" type="video/mp4"> <p>動画を再生するには HTML5 video に対応したブラウザが必要です。</p> </video> </div> </section> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
#mainVisual { position: fixed; overflow: hidden; width: 100%; height: 100vh; height: 100dvh; background: #000; z-index: -1 } #mainVisual::before { content: ''; display: block; background: rgba(0,0,0,0.4); position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; } #mainVisual .video-wrapper { position: relative; width: 100%; height: 100%; } #mainVisual .video-wrapper::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } #mainVisual .video-wrapper video { width: 100%; height: 100%; object-fit: cover; } |
とりあえずvideoタグで動画を設置します。
#mainVisualで大元を括ります。ここではfixedを指定して固定をしてスクロール時にそのまま残るようにしています。
高さは画面いっぱいになるように指定しています（100dvhについて詳しくはこちらから）。
#mainVisualで指定している::beforeについては、動画の上にうっすっらと透過した黒を乗せるためのものです。
必要なければ取ってしまってください。
そして.video-wrapper にrelative を指定。横と縦幅を100%にします。
HTMLの方では今回省略してしまっていますが、テキストの配置などに必要です。
あとはvideo タグに対してobject-fit: cover; を指定します。
これで上記で確保していた領域内いっぱいで動画を再生させることができます。
スクロールしていくと動画の上をコンテンツが通るようにするには？
サンプルサイトを見ていただくと、スクロールしていくと動画の上をコンテンツが通るようになっています。これについてはまず、メインビジュアルの領域のすぐ下に、HTMLでダミーを入れておきます。
|
1 2 3 4 |
<section id="mainVisual"> ～中略～ </section> <section id="mvDm"></section> |
ここにメインビジュアルと同じ高さ分をとるように指定しておきます。
|
1 2 3 4 5 |
#mvDm { width: 100%; height: 100vh; height: 100dvh; } |
これで透明なダミーの高さができました。
そしてこれ以降にあるコンテンツ部分ですが、position: relative; と z-index を指定します。
|
1 2 3 4 |
.items { position: relative; z-index: 5; } |
これは動画の部分でfixedなどを使っていて、そのままだと下にコンテンツが潜り込んでしまうからです。
他の要素に使えるように、まとめたclassを用意したりすると便利です。
スマートフォンの時は？
スマートフォンの時ですが、動画は自動再生されないのと、そもそも再生させても利用者の負担になることの方が多いと思うので、非表示にしてサムネイルを表示させておきましょう。|
1 2 3 4 5 6 |
#mainVisual .video-wrapper { background: url("movie/mv.jpg") no-repeat center center / cover; } #mainVisual .video-wrapper video { display: none; } |
これで『動画再生』の完成です。
無限ループスライド
無限ループしているスライドです。こちらJSは一切使用していなくて、CSSでアニメーションをさせています。
メンテナンスが発生しない、スライド数が少ないときに使える技術です。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="photoWrap"> <ul class="photoList"> <li><img src="images/gallery_01.jpg" alt="" loading="lazy"/></li> <li><img src="images/gallery_02.jpg" alt="" loading="lazy"/></li> <li><img src="images/gallery_03.jpg" alt="" loading="lazy"/></li> <li><img src="images/gallery_04.jpg" alt="" loading="lazy"/></li> <li><img src="images/gallery_05.jpg" alt="" loading="lazy"/></li> </ul> <ul class="photoList"> <li><img src="images/gallery_01.jpg" alt="" loading="lazy"/></li> <li><img src="images/gallery_02.jpg" alt="" loading="lazy"/></li> <li><img src="images/gallery_03.jpg" alt="" loading="lazy"/></li> <li><img src="images/gallery_04.jpg" alt="" loading="lazy"/></li> <li><img src="images/gallery_05.jpg" alt="" loading="lazy"/></li> </ul> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#gallery .photoWrap{ display: flex; overflow: hidden; } #gallery .photoList { display: flex; animation :infinity-scroll 95s infinite linear 0.5s both; } #gallery .photoList li{ margin-right: 30px; width: 453px; } @keyframes infinity-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } |
このようにHTMLでスライド部分わざと同じものを2つ重複させた状態にします。
後ろに単純に1番最初と同じ要素を持ってきて、疑似的にループを見せている…という感じです。
これをキーフレームアニメーションで横にどんどんスクロールさせていきます。
再生速度などはanimation の指定をお好みで調整してください。
これで『無限ループスライド』の完成です。
hoverしたら背景色を横から敷く
最後に、hoverしたら背景色を横から敷くアニメーションです。|
1 2 3 |
<p class="buyBtn"> <a target="_blank" rel="noopener"><span>購入ページへ</span></a> </p> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.products .productsList li .detail .buyBtn a{ .products .productsList li .detail .buyBtn a{ background: var(--color-black); display: block; text-align: center; padding: 15px; font-weight: 700; text-decoration: none; position: relative; overflow: hidden; } .products .productsList li .detail .buyBtn a span{ display: inline-block; padding-right: 33px; background-image: url("images/arrow_w.svg"); background-repeat: no-repeat; background-size: 18px auto; background-position: right 5px top 40%; transition: all 0.4s ease; position: relative; z-index: 3; } .products .productsList li .detail .buyBtn a:before { content: ''; position: absolute; top: 0; left: 0; z-index: 2; background:#333; width: 100%; height: 100%; transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s; transform: scale(0, 1); transform-origin: right top; } .products .productsList li .detail .buyBtn a:hover span{ background-position: right 0 top 40%; } .products .productsList li .detail .buyBtn a:hover:before{ transform-origin:left top; transform:scale(1, 1); } |
.buyBtn aに対して、ボタンの基本スタイルを指定しています。
そして.buyBtn a spanでテキストを囲って、z-index: 3;を指定しています。
これは横から色が敷かれる際にテキストが下に潜り込んでしまうため、それを回避するためにつけています。
ついでに矢印も一緒に設定しています。
そして.entryBtn a::before で背景色を指定します。
transformのscaleで横のサイズを0にしておきます。
そのあとは.buyBtn a:hover::before でhoverされた際の指定をします。
要素の座標を指定して、横幅を元の大きさに戻す指定をしています。
座標を変えればいろいろな方向から色を敷くことができます。
ちなみに矢印の位置も一緒にアニメーションをさせています。
これで『hoverしたら背景色を横から敷く』の完成です。
—
ぜひいろいろ試してみてください！
サンプルサイト
弊社のLP制作について
