Single Post
Font Awesomeをアニメーションさせる
アイコンフォントにマウスオーバーした時にアニメーションする方法を友人から教えて貰ったので、備忘録を兼ねて掲載させて頂きます。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のコピペだけ!おしゃれな見出しのデザイン例】のページもとても素晴らしいです。閲覧される事をお勧めします。
