色が敷かれてから画像やテキストが表示されるアニメーションを作ってみよう!

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

Webサイトを見ると最初に色が敷かれてから画像などが表示、そのあと敷かれた色は非表示に…というアニメーションをよく見かけると思います。
言葉にするとややこしいですが図にすると下のような感じです。


これは、CSSのアニメーショと少しのjsで対応できます。

早速作り方の詳細を見ていきましょう。


実際にアニメーションを作ってみよう

とりあえず実際に作成したデモと、これから使用するコードをまとめておきます。

DEMO

js



CSS



HTML



上記のものを使用して解説していきます。


jqueryなどを読み込ませておく

js周りについては要素が領域に入ったらアニメーションを動かすために、『inview.js』というjQueryプラグインを使用します。

inview.js

たしかCDNも配布されていますが、3x系のjqueryで動作しないので、DLして使用するのが無難です。
領域内に表示したらクラスを付与する系のjsなどであればご都合のよいものに差し替えてOKです。

一緒にjqueryの読み込みも忘れずに。


HTMLを書く

次にHTMLを書いていきましょう。今回は画像を使用する想定です。



上記のような感じで記述します。
名前や括る要素はこの通りでなくてよいですが、括り①>括り②>画像 のようにしておくと便利です。

CSSとjsでアニメーションの設定をしていく

それでは肝となるアニメーションの設定をしていきましょう。

色が敷かれて消えていくアニメーション

色が敷かれて消えていくアニメーションは画像を囲っている直前の要素(先ほど紹介した「括り②」に該当するもの)に対して設定していきます。

まずは画像の括りに対してはrelativeを指定、要素が横に広がらないようにinline-blockを指定しておきます。
また、後述しますが画像を拡大してからの表示という動作もあるためサイズ指定、はみ出ないようにoverflowはhiddenにしておきます。

次に括りの::beforeで設定を行っていきます。親要素に対して色がいっぱい広がるように指定しましょう。
ただ始まりは色が敷かれていない状態にしたいので、width: 0;を指定しておきます。


次にアニメーションの設定をしましょう。


左から現れて、右側に消えていくという設定になっています。
%の指定によって動きのタイミングも変わるので、お好みで調整してください。
このアニメーションは領域内に入った際に発火させるものですが、その使い方はまた後程記述します。


画像が表示されるアニメーション

色が敷かれるアニメーションの設定をしたら、次は非表示になっている画像を表示させるアニメーションの設定をしましょう。

今回は画像に関しては拡大していたものが徐々に縮小されつつ、ふわっと表示されるというアニメーションを設定することにします。
とりあえずデフォルトでは透明度を0、画像サイズは1.1倍にしておきます。



次に領域内に入った時のアニメーションです。
画像が通常サイズになりつつ表示されていく、という感じの設定をしています。
こちらも動きのタイミングはお好みで調整してください。


ではアニメーションを領域内に入った際に発火させるための指定をしていきましょう。


領域内に要素が入ったときにアニメーションを発火するための設定

まずはcssではなくinview.jsに対しての設定です。
inview.jsを読み込んだすぐ下などに以下のように記述をします。
今回は『.photoArea』が画面内に入ってきたら『.move』というクラスをphotoAreaに対して付与する、という設定をしました。


これで『move』がついたときにアニメーションをする、という指定をすることが可能になります。

ということで領域内に要素が入った時のアニメーションの設定をしていきます。
上記で設定したアニメーションを使用していきましょう。

下記のように『.photoArea.move』を使って設定していきます。
これで領域内に入ってきたときにアニメーションをしてくれます。


こちらも速度などはお好みで設定してください。


以上ですべての設定が完了しました!
実際に動いているか確かめてみましょう。

DEMO



理屈がわかれば結構手軽にアニメーションの実装ができます。
ぜひ試してみてください。

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

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

関連記事

プログラミング

【PHP】PHPでExcelファイルを操作するお話 その2

目次1 前回は・・・2 考え方3 保存したフォーマットにデータを入れる4 ExcelからPDFへ変換する4.1 mpdfで変換する4.2 TCPDFで変換する4.2.1 IPAexフォントのインストール5 結局何がいいの? 前回は・・・ 前回はPHPでExcelファイルを操作する方法をまとめました。 基本的にはCSV出力や一括登録の代替案としてまとめましたが、PhpSpreadsheetを使うことでExcelで作成した書類のフォーマットにPHPでデータを入力してPDFで出力す […]

プログラミング

【PHP】PHPでExcelファイルを操作するお話 その1

目次1 こういうことってないですか?2 インストール方法3 PHPでライブラリの呼び出し方4 Excelファイルのエクスポート方法4.1 ちなみに・・・5 Excelファイルのインポート方法6 これを組み合わせると??? こういうことってないですか? webでの管理システムを設計するときに「CSVでインポートやエクスポート機能を付けてよ」って言われる事があります。 インポートに関しては一括登録や一括削除や更新など割とリスクが大きいのですが、エクスポートはあったりします。 CS […]

スマホアプリ

【Android】スプラッシュスクリーンを設定するお話

スマホアプリを作る上で欠かせない・・・訳ではないですが、アプリの構成に必要なのはスプラッシュスクリーン(以下スプラッシュ画面)ですよね 目次1 そもそもスプラッシュ画面とは?2 Androidアプリで実装する場合(今まで)3 SplashScreen API登場3.1 スプラッシュ画面用のActivityを用意する3.2 themes.xmlにテーマを記述する そもそもスプラッシュ画面とは? スマホアプリにかかわらず、ほとんどのアプリやプログラムを起動した際に一瞬表示される画 […]

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

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

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

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