LPなどのPR重視のページではまだまだ有効な視覚効果が得られるのが「アニメーション」。最近はWordpressのテーマでデフォルトで組み込まれているものもあるので自分で実装する機会も少ないかもしれませんが目を引くポイントとなるので、ライブラリをいくつかピックアップ。
目次
簡単にサイトにアニメーションを入れる
テキストを動かす（animate.css）
CSSファイルのダウンロード
https://github.com/animate-css/animate.css?files=1
公式サイトとデモ
https://animate.style/
あわせて読みたい
Animate.css | A cross-browser library of CSS animations.
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guidi…
animate.cssの使い方を見る
STEP
headerにファイルを読み込み
CSSをダウンロードして配置した場合
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
CDNでリンクする場合
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
STEP
動かしたいテキスト部分に記述する
要素にanimatedクラスと動かしたいクラス名（例：bounce）をつけます。
動かしたいクラス名は公式サイトより確認してください。
<div class="animated bounce">テキストを弾ませる！</div>
アニメーションを繰り返しループさせたい場合は以下クラスを追加
<div class="animated bounce infinite">テキストを弾ませる！がループします</div>
STEP
追加設定
アニメーションの動きに調整を入れたい場合は以下を追加します。
動かし方の指定は公式サイトより確認してください。
STEP
動きの調整をするCSSを追加
.add-operation{
/* 3秒かけてアニメーションする */
-webkit-animation-duration: 3s;
animation-duration: 3s;
/* 10秒待ってからアニメーションする */
-webkit-animation-duration: 10s;
animation-delay:10s;
/* 5回繰り返す */
-webkit-animation-iteration-count: 5;
animation-iteration-count: 5;
}
※必要に応じて他のベンダープレフィックスを追加します。
STEP
動かしたいテキスト部分に記述する
<div class="animated bounce add-operation">テキストを弾ませる！</div>
マウスオーバーで動かす（hover.css）
CSSファイルのダウンロード
https://github.com/IanLunn/Hover
公式サイトとデモ
https://ianlunn.github.io/Hover/
hover.cssの使い方を見る
STEP
headerにファイルを読み込み
CSSをダウンロードして配置した場合
<head>
<link rel="stylesheet" href="hover-min.css">
</head>
STEP
動かしたい部分に記述する
要素に動かしたいクラス名（例：hvr-grow）をつけます。「hvr-」部分は固定で、ハイフン以降に動かしたいクラス名を入れます。
動かしたいクラス名は公式サイトより確認してください。
<a href="#" class="hvr-grow">Grow</a>
ボタン内にFont-awesomeなどのアイコンを付けて、そのアイコンに動作を入れる事もできます。
Font-awesomeを使う際のファイルは公式サイトより確認してください。
公式サイト：https://fontawesome.com/
STEP
ボタン内のアイコンを動かしたい場合
動かしたい動作のhover.cssのクラス名をaタグに付け、アイコンの方に「hvr-icon」のクラス名を指定します。
<a href="#" class="hvr-icon-forward">
詳細はこちら
<i class="fa fa-chevron-circle-right hvr-icon"></i>
</a>
STEP
Font-awesomeのアイコンにCSSを追加
指定したアイコンに疑似要素でFont-awesomeのキャラクターコードを追加します。
.hvr-icon-forward:before {
content: "\f138";
}
Font-awesomeのcontentsのキャラクター指定については、以下より確認できます。
https://astronautweb.co/snippet/font-awesome/#font-awesome-list
あわせて読みたい
Complete list of Font Awesome icons with their CSS content values
Code snippet for how to use Font Awesome on any element and a full list of all the Font Awesome icons and their CSS content values. Updated to v 4.2.0
画像をマウスオーバーで動かす（imagehover.css）
エフェクトの種類で無料と有料版があるのでご注意ください。ここでは無料版で説明してます。
CSSファイルのダウンロード
https://github.com/ciar4n/imagehover.css/archive/master.zip
公式サイトとデモ
https://www.imagehover.io/
https://www.imagehover.io/
imagehover.cssの使い方を見る
STEP
imagehover.cssをダウンロード
STEP
headerにファイルを読み込み
設定の説明は以下。もしくは、ダウンロードファイル内のindex.htmlに記載されてます。
https://github.com/ciar4n/imagehover.css
CSSをダウンロードして配置した場合
<head>
<link rel="stylesheet" href="css/imagehover.min.css">
</head>
CDNでリンクする場合
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/imagehover.css/2.0.0/css/imagehover.min.css"
/>
</head>
STEP
動かしたい部分に記述する
要素に動かしたいクラス名（例：imghvr-fade）をつけます。
動かしたいクラス名は公式サイトより確認してください。
<figure class="imghvr-fade">
<img src="#">
// ボタンに表示させる画像
<figcaption>
// Hover Content
// 動いて入ってくるテキスト
</figcaption>
<a href="#"></a>
// クリックした時の遷移先
</figure>
その他のアニメーション
他にもいくつかアニメーションのライブラリもありますので、希望の動きを探してみてください。
https://elrumordelaluz.github.io/csshake/
あわせて読みたい
CSShake
Some CSS classes to move your DOM! Easy-to-use classes that will add different kind of shake to each part of your site.
https://www.minimamente.com/project/magic/
あわせて読みたい
Magic Animations CSS3
Magic CSS are a set of simple animations to include in your web or app project’s
http://cssanimation.io/
http://cssanimation.io/
最後に…
WEBサイトのページレイアウトでは、ヘッダーからスクロールしていき、最後のフッターに行くまで読み飽きない為の「リズム」が必要です。画像やテキストの位置、色もそうですが、アクセントで動きを入れるのも効果的。CSSのライブラリの他にもJavascriptのものもあるので、簡単にハイクオリティな表現ができます。
ただし、入れすぎるとファイルの読み込みに時間が掛かったりして、表示速度に影響がでますのでご注意を。
