【無料で簡単！】アイコンフォントFont Awesomeの導入方法と使い方【初心者でも安心】で
紹介したアイコンフォントをアニメーションさせてみましょう。
動きが加わることで視覚的に目を引く感じになります。
やり方はほとんど同じなのでFont Awesomeの導入が済んでいれば
すぐにできますよ。
Font Awesomeをアニメーションさせるための下準備
Font Awesomeのコードと同様に
以下のコードを<head></head>の部分に貼り付けます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.css" type="text/css" media="all" />
はてなブログの場合は設定→詳細設定と進み、
要素にメタデータを追加のところです。
Font Awesomeをまだ導入していない場合は以下のコードもheadに追加してください。
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
Font Awesomeをアニメーションさせる
Font Awesomeのコードとアニメーションのコードをheadに追加したら
後はFont Awesomeのときと同じように設定していきます。
アニメーションのコードはFont Awesomeのアイコンコードに追加するだけなので
一覧にしてみました。
対応するアニメーションのコードを使用したいアイコンのコードに追加してください。
| コード | |
| ねじる | faa-wrench animated |
| 震える | faa-ring animated |
| 横に揺れる | faa-horizontal animated |
| 縦に揺れる | faa-vertical animated |
| 点滅 | faa-flash animated |
| 上に跳ねる | faa-bounce animated |
| 回転 | faa-spin animated |
| 浮遊する | faa-float animated |
| 脈打つ | faa-pulse animated |
| 揺れる | faa-shake animated |
| 飛び出す | faa-tada animated |
| 左から右へ移動 | faa-passing animated |
| 右から左へ移動 | faa-passing-reverse animated |
| 破裂する | faa-burst animated |
| 落ちる | faa-falling animated |
さらにfaa-fast、faa-slowを追加することで
アニメーションの速度を変更することができます。
faa-slow : アニメーション速度を遅くする
faa-fast
faa-slow
マウスオーバー時にホバーさせる
animatedをanimated-hoverにすることで
マウスオーバー時にホバーさせることができます。
<i class="far fa-grin-beam fa-5x faa-wrench animated-hover"></i>
クラス名faa-parentにanimated-hoverを付与し、
その中にアイコンのコードを挿入することでアイコンをリンクにして
マウスオーバー時にホバーさせることができます。
<a href="リンクのURL" class="faa-parent animated-hover"> <i class="far fa-grin-beam faa-wrench" style="font-size: 3em;"></i> </a>
まとめ
・表示用のコードにアニメーション用のコードを追加
・animated-hoverにすることでマウスオーバー時にホバー
・faa-parentを使うことでリンクにすることも可能
Font Awesomeをアニメーションさせるコードをheadに追加しておけば
後はFont Awesomeを表示するコードに追加するだけでいいので
基本的なものなら簡単にアニメーションさせることができます。
動きがあった方が見た目もいいのでどんどん使っちゃいましょう！
