アイコンをアニメーションさせる「Animated Icons」

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. アイコンをアニメーションさせる「Animated Icons」

アイコンをアニメーションさせる「Animated Icons」

アイコンをアニメーションさせる「Animated Icons」

こんにちは。アウラスタッフの仁木です。

icons8」でアニメーションつきのアイコンがフリーで配布されていたので試しに使ってみました。

アートボード 2

Webで使用しやすいものがチョイスされています。
リンク先のページでは「18 Free Animated Icons」と書かれていますが、種類は60種類確認できます。
同じ見た目のアイコンもいくつかありますが、アニメーションが違うものです。

 

使い方は簡単でした

10数行の記述ですぐに使うことが出来ました。
下のCodepenの「Result」の表示結果画面でアイコンをクリックするとアニメーションが確認できます。

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”veXyYN” default_tab=”js,result” user=”toshitaka”]See the Pen <a href=’https://codepen.io/toshitaka/pen/veXyYN/’>veXyYN</a> by Toshitaka Niki (<a href=’https://codepen.io/toshitaka’>@toshitaka</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

色も変えられる!

また、各アイコンはSVGなのでCSSで「stroke」プロパティと「fill」プロパティで色を変更することができます。
SVGのパスでアニメーションをつけているので、CSSより凝った動きでフレンドリーな印象です。UXにも大きく効果がありそうですね。

 

気を付けること

注意しておくこととして、IEとEDGEでは表示が安定しておらず一部線が消えてしまったりするようです。

最近はiPhoneやiPadを筆頭に高解像度のディスプレイが普及してきたのでSVGが大活躍している気がします。
サイトを訪れた人が「おっ」と思うような、ちょっとしたアクセントでホームページもより良くしていきたいですね。

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら
Webデザイナー、Webプログラマ募集中!