【簡単】FontAwesome Animationの使い方

【簡単】FontAwesome Animationの使い方
Pocket

この記事では、FontAwesomeのアイコンをアニメーションさせて動きを加える方法を紹介します。簡単に導入できるのでオススメです。

Advertisement

FontAwesome Animationとは?

FontAwesome Animationとは、FontAwesomeで使用したアイコンをアニメーションさせて動きを加えたものになります。

なので、CssやJavascriptなどは使用する必要はなく、クラス名を加えるだけで色々なアニメーションの動きを加えることが出来て、初心者の方でも簡単に使用することが出来ます。

しかも、アイコンをホバーした時に動いたり、親の要素をホバーした時に動くなど、ユーザーが何らかのアクションを行なった際によって動きを変えれるので、とても便利ですね。

次の章で使い方や種類を説明していきたいと思います。

FontAwesome Animationの使い方

では、使い方を説明していきたいと思います。

まずはこちらが動きの詳細が載っている参考サイトになります。

http://l-lin.github.io/font-awesome-animation/

アイコンアニメーション

htmlの<head>タグ内にコードを埋め込む

初めに、htmlの<head>タグ内にコードを埋め込みます。2つのコードを埋め込みます。

1つ目ですが、FontAwesomeを使用するので、FontAwesomeのコードをhtmlの<head>タグ内に埋め込みます。

下記のリンク要素をコピーしてhtmlの<head>タグ内に埋め込みます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

2つ目ですが、FontAwesome Animationのコードをhtmlの<head>タグ内に埋め込みます。

こちらのリンク要素をコピーして埋め込んで下さい。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

上記の2つのリンク要素をhtmlの<head>タグ内に埋め込んだら、準備は完了です。次は実際に使っていきます。

使用するアイコンを埋め込む

使い方としては、FontAwesomeの使い方と一緒で使いたいアイコンを選んで、htmlに埋め込むだけですが、今回のFontAwesome Animationでの追加するクラス名を紹介したいと思います。

なので、FontAwesomeの使い方に関しては過去のこちらの記事をお読み下さい。

では、早速、FontAwesome Animationで使用するクラス名を紹介していきたいと思います

クラス名を埋め込む

クラス名動き方
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

例 <i class=”fab fa-amazon-pay fa-fw faa-wrench animated“></i>

上記のクラス名を<i>タグのクラス名に埋め込むだけなので簡単ですね。

Advertisement

アイコンをホバーした時にアニメーションさせる

先ほど紹介した上記のクラス名に「-hover」を付けるだけです。

例 <i class=”fab fa-amazon-pay fa-fw faa-wrench animated-hover“></i>

↑アイコンをホバーしてみて下さい。ちゃんと動きますね。

親要素をホバーした時にアイコンをアニメーションさせる

今度は親要素をホバーした時にアイコンをアニメーションさせます。

先ほどはアイコン上をホバーした時に動きましたが、今度は親要素です。

ボタンなどをホバーした際にアイコンに動きを付けるなど、Webデザインでも使えますね。

ここのボックスをホバーして下さい。

使い方は簡単です。

親要素にクラス名の「faa-parent animated-hover」を加えます。

次にアイコンに関しては先ほど紹介した動き方の表のコードで「animated」は消します。( faa-wrench animated )

例 <i class=”fab fa-amazon-pay fa-fw faa-wrench“></i>


<p class="faa-parent animated-hover">
<i class="fab fa-amazon-pay faa-wrench"></i>文字
</p>

こんな感じで使えます。

まとめ

FontAwesomeの使い方についてまとめました。

FontAwesomeでは簡単にアイコンをhtmlに埋め込む事が出来ましたが、FontAwesome Animationでは、そのアイコンをクラス名を追加するだけで簡単に動きを付ける事が出来ましたね。

Web制作でボタンをホバーした際に動きを付ける際にも使えますね。

サンプルボタン

Advertisement

記事を読んで頂きありがとうございます。

Pocket