HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir

シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。

デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。

Izmir
Izmir -GitHub

• Izmirの特徴
• Izmirのデモ
• Izmirの使い方

Izmirの特徴

• 画像をホバーすると多彩なアニメーションを適用します。
• エフェクトを組み合わせることで、2000通り以上のエフェクトを使用可能。
• 20種類のボーダーエフェクト、9種類の画像エフェクト、12種類のテキストエフェクト。
• オーバーレイのスタイル、アニメーションの遅延、テキストのレイアウトなど、classも豊富。
• アクセシブル（デスクトップはホバー、スマホはフォーカス）。
• 2Kbの超軽量ライブラリ。
• 実装・カスタマイズ用のドキュメント完備。
• MITライセンスで、商用プロジェクトでも無料。

Izmirのデモ

デモでは、Izmirのさまざまな画像エフェクトを楽しめます。

Izmirのデモページ

Izmirの使い方

Step 1: 外部ファイル

当CSSを外部ファイルとして記述します。

Step 2: HTML

Izmirのエフェクトに使用する画像やテキストは、下記のように実装します。

.c4-izmirは共通に使用するclassで、ボーダーや画像やテキストなどのエフェクトはclassを加えるだけで簡単に実装できます。
カスタマイズ方法は、下記のドキュメントをご覧ください。

Izmirのドキュメント