1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. CSSのhoverエフェクトアニメーションのライブラリ「Izmir Hover Effects」がかっこいい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
HeimVisionネットワークカメラHM302を外で使えるように防水仕様にしてみた!

HeimVisionネットワークカメラHM302を外で使えるように防水仕様にしてみた!

先日レビューでも書いた「暗視性能も優秀なHeimVisionのAlexa対応ネットワークカメラHM302を使ってみた!」のネットワークカメラですが、今回は外でも使えるように防水仕様...

暗視性能も優秀なHeimVisionのAlexa対応ネットワークカメラHM302を使ってみた!

暗視性能も優秀なHeimVisionのAlexa対応ネットワークカメラHM302を使ってみた!

今回紹介するのはHeimVisionのAlexa対応ネットワークカメラHM302です。HM302の特徴としてはネットワークカメラとしてはかなり画素数の高い300万画素のカメラを搭載して高画...

3日間限定で出前館で50%OFFとなるキャンペーン「半額祭」を実施中!

3日間限定で出前館で50%OFFとなるキャンペーン「半額祭」を実施中!

出前館では3日間限定で、対象店舗の対象商品が50%OFFとなる半額祭というキャンペーンを実施しています。対象店舗はピザーラ、ドミノピザ、ピザハット、ケンタッキー、デニ...

FireTV StickでAlexaスキルをインストールして使う方法!

FireTV StickでAlexaスキルをインストールして使う方法!

今回はテレビに接続して使うデバイスであるAmazon FireTV Stickで、Amazonのスマートスピーカーと同様にAlexaスキルをインストールして使う方法について紹介したいと思いま...

ジャンプが無料で見れる「MANGA Plus by SHUEISHA」のアプリを無理やりインストール!

ジャンプが無料で見れる「MANGA Plus by SHUEISHA」のアプリを無理やりインストール!

先日の記事で紹介した集英社が公式で運営しているジャンプの連載漫画の最新話を無料で公開している漫画サイト「MANGA Plus by SHUEISHA」ですが、WEBサイト以外にもアプリ...

ジャンプ連載漫画の最新話が無料で読める「MANGA Plus by SHUEISHA」を日本から見る方法!

ジャンプ連載漫画の最新話が無料で読める「MANGA Plus by SHUEISHA」を日本から見る方法!

みなさんは「MANGA Plus by SHUEISHA」というWEBサービスをご存知だろうか?なんとこのサイトではジャンプの連載されている作品の最新話が無料で読むことができます。ジャ...

Elechomesの6L大容量ハイブリッド式加湿器 JC5502を使ってみた!

Elechomesの6L大容量ハイブリッド式加湿器 JC5502を使ってみた!

今回紹介するのはElechomesの6L大容量ハイブリッド式加湿器JC5502です。この加湿器は超音波とヒーターによるハイブリッド式なので、従来よりも省エネでなおかつ素早くお部...

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

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

今回紹介するのはCSSで実装されているHoverエフェクトのライブラリである「Izmir Hover Effects」です。このIzmir Hover Effectsで公開されているのはCSSのHoverエフェクト...

日本未発売のモトローラのMoto Modsスピーカーを買ったみた!

日本未発売のモトローラのMoto Modsスピーカーを買ったみた!

今回は日本未発売のモトローラのMoto Modsスピーカーのレビューを書きたいと思います。日本でもJBL SoundBoostのMoto Modsは販売されていますが、海外では日本では未発売So...

NetaGear RSS News

Now Loading

Article

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

Webデザイン > html+CSS+javascript 
Izmir_Hover_Effects_000.png

今回紹介するのは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_Hover_Effects_001.png



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

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

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

実装方法




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

2.headタグ内に以下のコードを追加します。
<link rel="stylesheet" href="css/izmir.min.css">
3.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のデモを参考に実装してみてはいかがでしょうか?

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...