注目キーワード
  1. Wordpress
  2. テーマ
  3. プラグイン
  4. SEO
  5. 集客

画像マウスホバーの様々なエフェクトを組み合わせて管理できるCSSエフェクトライブラリ・「Izmir Hover Effects」


Izmir Hover Effects


Izmir Hover Effectsは画像へのマウスホバーの際に様々なエフェクトを組み合わせて実装、管理できるCSSエフェクトライブラリです

20のボーダーアニメーションエフェクト、9の画像アニメーションエフェクト、12のテキストアニメーションエフェクト、オーバーレイやカラーなどが全てclassで管理されており、組み合わせる事で1000以上のエフェクトのパターンを作れるよう設計されているそうです

Ads

各エフェクトは全て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。

Izmir Hover Effects

#wordpress #ワードプレス #SEO #集客

「かちびと.net」を閲覧する

最新情報をチェックしよう!
>WordPressに関連する情報まとめ

WordPressに関連する情報まとめ

ブログ / ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。当サイトを見て、まずはトライしてみましょう!

CTR IMG