Izmir Hover Effects
Izmir Hover Effectsは画像へのマウスホバーの際に様々なエフェクトを組み合わせて実装、管理できるCSSエフェクトライブラリです
20のボーダーアニメーションエフェクト、9の画像アニメーションエフェクト、12のテキストアニメーションエフェクト、オーバーレイやカラーなどが全てclassで管理されており、組み合わせる事で1000以上のエフェクトのパターンを作れるよう設計されているそうです
各エフェクトは全てclassで管理されています。例えば上サンプルなら
< figure class = "c4-izmir c4-border c4-border-corners-2 c4-image-pan-left" > </ figure > |
親要素に、izmirを使うためのclass、ボーダーアニメーションを加えるclass、ボーダーエフェクトの種類を指定するclass、左にパーンするclassを付与しています
< img src = "foo.jpg" alt = "Sample Image" > < figcaption class = "c4-layout-top-right" > < div class = "c4-reveal-left" > < h2 > hoge </ h2 > </ div > < div class = "c4-reveal-left c4-delay-200" > < h2 > huga </ h2 > </ div > < div class = "c4-reveal-left c4-delay-400" > < h2 > piyo </ h2 > </ div > </ figcaption > |
画像を読み込んで各テキスト要素にテキストエフェクト用のclassを加えます。これで完成です
これらのclassを組み合わせると1000ものエフェクトの種類を実装できる、という感じです
スマフォ時代の昨今でこういったマウスホバーエフェクトは以前より求められなくなった印象ではありますが、便利は便利ですし、需要が0でもないので覚えて多くと役に立つかもしれませんね。ライセンスはMIT。