Loading...

Single Post

HOME > post > Column > Font Awesomeをアニメーションさせる

Font Awesomeをアニメーションさせる

| Column, Web
Font Awesome Icon イメージ画像

アイコンフォントにマウスオーバーした時にアニメーションする方法を友人から教えて貰ったので、備忘録を兼ねて掲載させて頂きます。Font Awesome Iconsは日頃から使っているのですが、こんな方法があったんですね。

まず、FontAwesomeを使うためにCDNをhead内に貼り付けましょう。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

次にアニメーションのCDNを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パターンあるようなので、わかりやすいように下にサンプルを用意しました。

アイコンにマウスオーバー時アニメーション

ソースは、以下のようになっています。通常の【fa fa-arrow-right】に【faa-horizontal animated-hover】を加えるだけです。【animated-hover】を【animated】とすると無限ループになります。

<a href="#" class="btn btn-mod btn-border btn-medium btn-round"><i class="fa fa-arrow-right faa-horizontal animated-hover" aria-hidden="true"></i>Button</a>

ボタンにマウスオーバーした時にアニメーション

ソースは、以下のようになります。親要素のclassに【faa-parent animated-hover】を加え、icon fontのclassに【faa-horizontal】の様なアニメーション動作を加えます。

       <a href="#" class="btn btn-mod btn-border btn-medium btn-round faa-parent animated-hover"><i class="fa fa-arrow-right fa-fw faa-horizontal" aria-hidden="true"></i>Button</a>

1つ目のアイコンホバー時は、スクロールで「Page Top」などで使えそうですね。2つ目は、リンクやシェアボタンなど万能に使えそうな感じです。他にも多くのアニメーションが用意さるていますので、デモページでご紹介します。

この記事を掲載するにあたり、こちらのページを参考にさせて頂きました。他にも多くの機能が紹介されていますので、閲覧されることをお勧めします。

まとめ

Font Awesomeを利用する機会が多いのでアニメーション・エフェクトは今後ガンガン使えそうな感じです。

参考にさせて頂いたさるわかさんのウェブサイトは、参考になる記事がたくさんあります。他に【CSSのコピペだけ!おしゃれな見出しのデザイン例】のページもとても素晴らしいです。閲覧される事をお勧めします。

関連記事

Contact Page