実際のサンプルでアニメーション解説 [焼肉用のお肉ネット通販特設サイト編]【CSS/JS】

  • このエントリーをはてなブックマークに追加


WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。
今回は弊社で作成した、[焼肉用のお肉ネット通販特設サイトのサンプルを使用しながら解説していきます。
初心者向けの記事です。

参考にするサンプルサイトはこちらから

サンプルサイト

動画再生

メインビジュアルで動画を再生させています。
JSなどで再生させる方法もありますが、今回はCSSだけで対応してみます。

HTML

CSS


とりあえずvideoタグで動画を設置します。
#mainVisualで大元を括ります。ここではfixedを指定して固定をしてスクロール時にそのまま残るようにしています。
高さは画面いっぱいになるように指定しています(100dvhについて詳しくはこちらから)。

#mainVisualで指定している::beforeについては、動画の上にうっすっらと透過した黒を乗せるためのものです。
必要なければ取ってしまってください。

そして.video-wrapperrelative を指定。横と縦幅を100%にします。
HTMLの方では今回省略してしまっていますが、テキストの配置などに必要です。

あとはvideo タグに対してobject-fit: cover; を指定します。
これで上記で確保していた領域内いっぱいで動画を再生させることができます。

スクロールしていくと動画の上をコンテンツが通るようにするには?

サンプルサイトを見ていただくと、スクロールしていくと動画の上をコンテンツが通るようになっています。

これについてはまず、メインビジュアルの領域のすぐ下に、HTMLでダミーを入れておきます。


ここにメインビジュアルと同じ高さ分をとるように指定しておきます。


これで透明なダミーの高さができました。

そしてこれ以降にあるコンテンツ部分ですが、position: relative;z-index を指定します。


これは動画の部分でfixedなどを使っていて、そのままだと下にコンテンツが潜り込んでしまうからです。
他の要素に使えるように、まとめたclassを用意したりすると便利です。

スマートフォンの時は?

スマートフォンの時ですが、動画は自動再生されないのと、そもそも再生させても利用者の負担になることの方が多いと思うので、非表示にしてサムネイルを表示させておきましょう。


これで『動画再生』の完成です。

無限ループスライド

無限ループしているスライドです。
こちらJSは一切使用していなくて、CSSでアニメーションをさせています。
メンテナンスが発生しない、スライド数が少ないときに使える技術です。

HTML


CSS


このようにHTMLでスライド部分わざと同じものを2つ重複させた状態にします。
後ろに単純に1番最初と同じ要素を持ってきて、疑似的にループを見せている…という感じです。

これをキーフレームアニメーションで横にどんどんスクロールさせていきます。
再生速度などはanimation の指定をお好みで調整してください。

これで『無限ループスライド』の完成です。

hoverしたら背景色を横から敷く

最後に、hoverしたら背景色を横から敷くアニメーションです。


CSS


.buyBtn aに対して、ボタンの基本スタイルを指定しています。
そして.buyBtn a spanでテキストを囲って、z-index: 3;を指定しています。
これは横から色が敷かれる際にテキストが下に潜り込んでしまうため、それを回避するためにつけています。
ついでに矢印も一緒に設定しています。

そして.entryBtn a::before で背景色を指定します。
transformのscaleで横のサイズを0にしておきます。

そのあとは.buyBtn a:hover::before でhoverされた際の指定をします。
要素の座標を指定して、横幅を元の大きさに戻す指定をしています。
座標を変えればいろいろな方向から色を敷くことができます。

ちなみに矢印の位置も一緒にアニメーションをさせています。

これで『hoverしたら背景色を横から敷く』の完成です。


ぜひいろいろ試してみてください!

サンプルサイト

弊社のLP制作について

執筆者:工藤[ WEBデザイナー ]

WEBデザイナー。 最近はWordPressを触るのが好きです。よろしくお願いします。

関連記事

Webサイト制作

Webアクセシビリティの基本を学ぼう!

近年Webサイト制作時に求められる『Webアクセシビリティ』。 正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。 自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。 一緒にWebアクセシビリティについて学んでいきましょう。 目次1 そもそもWebアクセシビリティってなに?2 基本的な対応内容2.1 色のコントラストをはっきりさせよう2.2 文字サイズを変更できるようにしよう2.3 できるだけテキストベースを心 […]

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。