実際のサンプルでアニメーション解説 [オープンキャンパス特設サイト]【CSS/JS】

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


WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。
今回は弊社で作成した『受験生向け女子大学のオープンキャンパス特設サイト』のサンプルを使用しながら解説していきます。
初歩的なアニメーションの知識はある、という方向けの記事です。

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

サンプルサイト

inview.jsを読み込ませる

今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。
これを使うとスクロールをして表示領域に入った時にイベントを発生させることができます。


一緒にjqueryの読み込みもさせてください。
CDNも配布されていますが、3x系のjqueryで動作しないので、使用しているものによってはDLして使用するのが無難です。

あとは読み込ませたすぐ下にこのように記述しておきます。
記述の内容としては、まず『inview』というclassをトリガーにします。
このトリガーが視界に入ったら『is-show』というclassを付与します。これが付与されることでアニメーションイベントを発生させることができます。


おそらく表示するタイミングを調整したいことも多いと思うので、領域内に表示したらクラスを付与する系のjsなどであればinview.jsでなくてもご都合のよいものに差し替えてOKです。

では一つひとつ解説していきましょう。

スライドアニメーション

アニメーションしながら、自動で切り替わるスライドです。
徐々に画像を拡大させつつ、数秒の間隔で次の画像に切り替えています。

JSのライブラリとCSSを兼ね合わせているので、それぞれ解説していきます。

スライド本体

まず、単純にスライドを動作させるのにはsplideというライブラリを使用しています。

splide

軽量でオプションも豊富なのでおすすめのライブラリです。
とりあえず今回使用したものを載せます。

HTML


CSS


JS


CSSはhead部分に設置してください。今回はcdnで読み込ませています。
スライドの細かいデザイン部分についてはきりがないので今回はここに乗せるのは割愛します。

HTML部分についての解説です。
まずは.splideで全体を囲みます。
.splide__arrows部分についてはスライドの矢印部分です。必要に応じてつけてください。
.splide__trackでulの直前を囲みます。
次に.splide__listをulに指定します。
最後に各li要素に.splide__slideをつけていきます。
少し囲みなどが多い気もしますが、最初に型を作ってしまえばそれに当てはめていくだけです。

JSについてはbodyの閉じタグの直前に置いています。
こちらもcdnのものを読んでいます。
そのあとオプションを指定していきます。
オプションも解説するとここでは長くなってしまうのでざっくり説明すると、6秒で自動で切り替わるスライドを生成する、といった感じになっています。

これでスライド本体の設定は完了です。
今度はCSSでアニメーションを設定していきます

切り替わりの時に白い帯を表示させる

最初は切り替わりの時に白い帯を重ねる方法についてご紹介します。

HTML


CSS


まず.splide__slideのbeforeに対して横幅100%の白い帯をデフォルトで表示させておきます。
そしてsplideでは、スライドが切り替わった時に.is-active というclassが付きます。
そのタイミングで、その白い帯を徐々に横幅0%にしていく、というキーフレームアニメーションを設定します。

速度などはお好みでよいですが、先ほど設定したsplideの切り替え秒数に合わせてうまく調整してください。

これで白い帯を表示させるアニメーションは完了です。

スライド画像を徐々に拡大させる

次は時間経過で徐々に画像を拡大させる方法です。

HTML


CSS


スライドは.splide__slideに対して、aspect-ratioを使用してサイズを設定しています。
画像にはobject-fit: cover;を指定しています。これで先ほどの.splide__slideのボックス全体を埋める形になります。

そこから.is-activeになったよスライドに対して、画像のアニメーションを指定します。
こちらも速度などはお好みでよいですが、先ほど設定したsplideの切り替え秒数に合わせてうまく調整してください。

これでスライド画像を徐々に拡大させるアニメーションは完了です。

ページネーションを時間経過とともに変化させるアニメーション

スライド周りではこれで最後、ページネーションを時間経過とともにアニメーションさせる方法です。
徐々にタイマーのように、バーに色が付いていきます。
これはsplideにデフォルトで付いているページネーションをカスタマイズしていきます。

CSS


とりあえず、生成されるページネーションを好みの形に調整します。
デフォルトのものから変更するために少し色々なclassが付いています。

そして.is-activeになった時に徐々に表示される色の部分はbefore で実現させます。
.splide__pagination__pageに対して、上から色を被せて、最初は横幅を0にしておきます。
.is-activeになったら、広がっていくようなアニメーションをさせます。
splideの切り替え秒数は6秒で設定しているので、今回はCSSでも6sで設定しています。

これでページネーションを時間経過とともに変化させるアニメーションの完了です。

以上で『スライドアニメーション』の完成です。

メインビジュアルの帯のアニメーション

メインビジュアルの後ろに敷いている帯のアニメーションについてご紹介します。
ここでは横からスライドして帯を表示グラデーションの色を動かすという2つのアニメーションをさせています。

帯のベースは以下です。

CSS


CSSでメインビジュアルの囲いである#mainVisual に対して、after で指定をしています。

そしてここから、上記のinview.is-show のclassが付与されたときにアニメーションを開始させる指定をします。

CSS


2つのアニメーションを一緒に指定しています。

まずはmainvBarというキーフレームアニメーションを用意して、.is-showが付与されたときに横幅が100%になるように設定します。
これで横からスライドして帯を表示するアニメーションができました。

次はグラデーションのアニメーションです。
グラデーションをbackground-sizeで大きめに設定をして、それをbggradientmのキーフレームアニメーション内でbackground-positionを使用してアニメーションさせています。
これで横からグラデーションを動かすアニメーションができました。
グラデーションのアニメーションに好いて詳しくはこちらの記事でも紹介しています。


これで『メインビジュアルの帯のアニメーション』の完成です。

各要素を下から上にフェードインさせる

次に各要素を下から上にフェードインさせる方法についてです。
ここではinviewを主に使います。

HTML


CSS


inviewと、下から上に表示させるためのfadeInUpというclassをつけておいて、.is-show が付与されたらアニメーションさせる、という感じになっています。
これだけで完了です。

今回は元からliの上部をずらしたデザインなので、次々と表示されるようなアニメーションになっていますが、頭がそろった要素を次々と表示させたい場合にはtransition-delayをうまく使用しましょう。

これで『各要素を下から上にフェードインさせる』の完成です。

色が敷かれてから画像を表示

色が敷かれてから画像を表示させるアニメーションです。

HTML


CSS


それではCSSを分解して解説していきます。

まずは写真のエリアについて、はみ出た部分に関しては overflow: hiddenで隠すようにしています。

次に色を敷くアニメーションです。色を乗せつつ、最初はwidthを0に指定。
そのあとトリガーが付与されたらwidthを100%にするアニメーションを設定します。

次に写真のアニメーションです。
ここで画像に対して、デフォルトでtransform: scale(1.1);と指定しておきます。
画像を拡大しておいて、photoAnime のキーフレームアニメーションで徐々に戻していきます。

実は似たようなものはこちらの記事に書いてあるので参考にどうぞ。

これで『色を敷いてからのアニメーション』の完成です。

テキストを横から1文字ずつ表示

次にテキストを横から1文字ずつ表示する方法です。

HTML



CSS


HTMLではspan1つ1つに対して.inviewを指定しています。

CSSではspanにテキストのアニメーション速度、透明度、横にどれぐらいずらすかを指定しています。
そのあとまとめて.is-show がついた際の透明度・ずらした分を元に戻す指定を行います。
あとは1つ1つ、アニメーション開始のタイミングを調整します。

これで『テキストを横から1文字ずつ表示するアニメーション』の完成です。

マウスホバーでボタンのグラデーションを動かす

マウスホバーしたときに、背景のグラデーションを動かす方法についてです。

HTML


CSS


アニメーションの仕組みですが、背景のグラデーションのbackground-sizeを最初大きめに取っておいて、background-positionをずらして再現しています。
図解すると以下のような感じです。

scaleなどはお好みで調整してください。
また、こちらでも解説をしているのでそちらもチェックしてみてください。

これで『マウスホバーでボタンのグラデーションを動かす』の完成です。

アコーディオン

最後に、アコーディオンの要素です。
こちらはJSを使用します。

JS


HTML


CSS



JSで.q-open というclassが付与されれいる要素をクリックすると、そのすぐ隣にある.ans が開くようになっています。

また、.q-openの親要素のliに対して.active が付くようにしています。
こうすることで、#qa .qaList li h3に対してbeforeとafterで作成しているプラスのアイコンが、クリックされ、.active が付くことでマイナスに変化するように指定しています。

これで『アコーディオン』の完成です。



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

サンプルサイト

弊社の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制作に関するご相談はお気軽にどうぞ

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