ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近のWebサイトでは単色のアイコンを使うことが増えています。言葉で説明しない分、分かりやすいのですが、ユーザの目を引きたい時になかなか目立たせることができないという問題もあります。

そこで使ってみたいのがiconate.jsです。2つのアイコンを指定して、その間を綺麗にアニメーションしながら切り替えてくれるライブラリです。

iconate.jsの使い方

アニメーション系なので、実際の動きを見るのが一番分かりやすいでしょう。

デモではアイコンとしてFont Awesomeを使っています。アイコンはWeb Fontを対象にしているようです。アニメーションは多数用意されていますので、自由に選択してアイコンを切り替えることができます。矢印をアニメーションさせたり、鉛筆アイコンをアニメーションさせて保存を促すといったような使い方はいかがでしょう。

iconate.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

iconate.js

bitshadow/iconate

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2