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

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

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

サイトのキャプチャ

Izmir
Izmir -GitHub

Izmirの特徴

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

Izmirのデモ

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

デモのキャプチャ

Izmirのデモページ

Izmirの使い方

Step 1: 外部ファイル

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

Step 2: HTML

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

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

サイトのキャプチャ

Izmirのドキュメント

sponsors

top of page

©2020 coliss