CSSのhoverエフェクトアニメーションのライブラリ「Izmir Hover Effects」がかっこいい！

2020.02.032020.04.26

今回紹介するのはCSSで実装されているHoverエフェクトのライブラリである「Izmir Hover Effects」です。このIzmir Hover Effectsで公開されているのはCSSのHoverエフェクトのデモなのですが、12種類のかっこいいマウスHover時のアニメーションを見ることができます。公開されているのは12種類ですが、1000ものスタイルの組み合わせを使うことができます。

大昔ではこういうアニメーションをするにはJavascriptやFlashを使わないといけませんでしたが、現在のWEBではHtml+CSSだけで実装できるのですから本当にすごいですね。CSS3によって表現できる範囲が広がっているので、かっこいい演出が簡単に実装できるようになっています。

Izmir Hover Effectsのホバーエフェクトの動画

Izmir Hover Effectsのホバーエフェクトの動画を撮影したので、どんな感じでアニメーションするのか気になる人はぜひご覧ください。Javascriptなしでもこれだけかっこいい表示ができるのですからすばらしいですね！CSS3が使えるようになってからは表現の幅が広がっていろいろなことができるのが良いですね！

Izmir Hover Effectsライブラリについて

Izmir - ImageHover CSS Library

CSSのHoverアニメーションのデモサイトには12種類のデモが用意されていますが、「Izmir Hover Effects」ライブラリでは1000種類以上の組み合わせで自由なHoverエフェクトを作り出すことが出来ます。CSSのファイルサイズも2KBと軽量なので気軽に使うことが出来ます。

1000スタイルの組み合わせ
20種類のアニメーション化された境界効果
9アニメーション画像効果・12種類のアニメーションテキストエフェクト

マウスカーソルを乗せるとアニメーションしてこのような表示になります。どのようなアニメーションになっているのか気になる人は動画かデモサイトを訪れて確認してみてください。CSSだけで書かれているのにとてもかっこいい表示なっています。

Izmir Hover Effectsの実装方法

ciar4n/Izmir

GithubからファイルをダウンロードしてCSSファイルをサーバにアップロードします。

headタグ内に以下のコードを追加します。

<link rel="stylesheet" href="css/izmir.min.css">

Hoverエフェクトを行いたい要素を以下のように設定すれば完了です。

<figure class="c4-izmir">
  <img src="https://source.unsplash.com/FaPxZ88yZrw/400x300" alt="Sample Image">
  <figcaption>
      <h3>
        Some sample text
      </h3>
    </div>
</figure>

今回の個人的感想＆まとめ

今回は珍しくCSSのHoverエフェクトについての紹介でした。マウスを載せないと出てこないエフェクトではありますが、こういう細かい部分にもこだわるとサイトのクオリティがあがっていいですよね。Webデザインも日々進化していますし、javascriptを使わなくてもCSSだけで簡単にアニメーションを実装できる様になったのは本当にすごいです。

CSS3は成熟しており、すべてのブラウザで動作する時代なのでこういうのはどんどん使って行きたいですね。アニメーションも簡単にCSSだけで実装できますし、いろいろな部分で取り入れていきたいです。ちなみにスマホでもしっかりアニメーションが動くようになっています。

ぜひサイトを作っている方はIzmir Hover Effectsのデモを参考に実装してみてはいかがでしょうか？