1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. CSSのhoverエフェクトアニメーションのライブラリ「Izmir Hover Effects」がかっこいい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
女装してYoutuberを始めることにしました!

女装してYoutuberを始めることにしました!

本日よりおっさんだけど女装してYoutuberを始めることにしました。ブログ開設から15年目で突然こいつは何を頭がおかしい事をいい出してるんだと思われた古参ユーザーもいる...

ドライブレコーダーAPEMAN C550を内装を剥がしてミラココアに取り付けてみた!

ドライブレコーダーAPEMAN C550を内装を剥がしてミラココアに取り付けてみた!

私の母の車にはドライブレコーダーがついていないので今回はAPEMAN C550という5000円以下で購入可能な激安ドライブレコーダーを自分で取り付けてみました。こういうのもプ...

コスパ最高なドライブレコーダーAPEMAN C550を使ってみた!

コスパ最高なドライブレコーダーAPEMAN C550を使ってみた!

ここ近年では車を運転中のトラブルなどがよく話題になっていますよね。あおり運転など危険な運転をされたときのためにもドライブレコーダーはあったほうがいいです。ドライ...

新色ブルーが発売!Tribit StormBoxスピーカーを2台ペアリングして使ってみた!

新色ブルーが発売!Tribit StormBoxスピーカーを2台ペアリングして使ってみた!

ちょっと前の記事で完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!という記事でTribit StormBoxスピーカーについてのレビュー記事を書きました...

Zhiyun Crane-M2が更に値引き!ジンバルが届いたので確認してみた!

Zhiyun Crane-M2が更に値引き!ジンバルが届いたので確認してみた!

先日の記事でアメリカのAmazonでZhiyun Crane-M2の新品同様品が激安で販売されているという記事を書きましたが、なんとさらに値引きされて129ドルで販売されています。価格...

BOOK☆WALKERで50%還元の春のホン祭りキャンペーンを実施中!初回購入は100%還元!

BOOK☆WALKERで50%還元の春のホン祭りキャンペーンを実施中!初回購入は100%還元!

BOOK☆WALKERでは、春からの新生活、本のある暮らしを楽しんでもらいたいというそんな思いを込めて、「春のホン祭り!全会員コイン50%還元キャンペーン」を実施しています...

激安ShopDDにAmazonタイムセール検索機能などを追加するアップデートを実施!

激安ShopDDにAmazonタイムセール検索機能などを追加するアップデートを実施!

激安特価情報サイトの激安ShopDDが公開してから一ヶ月ちょっと経ちましたが、今回Amazonのタイムセールの検索機能を追加しました。Amazonのタイムセールって結構安いのもあ...

3軸ジンバルのZhiyun CRANE M2を安く購入する方法!

3軸ジンバルのZhiyun CRANE M2を安く購入する方法!

最近カメラ関連でジンバルが欲しくて色々探していたのですが、持ち運びもしやすいサイズ感でミラーレス一眼もスマホもアクションカメラも載せられる優秀なジンバルを見つけ...

メルカリ・メルペイ新規登録の招待コードで最大1500ポイントをもらう方法!

メルカリ・メルペイ新規登録の招待コードで最大1500ポイントをもらう方法!

最近メルカリを初めて使う機会があったのですが、その際にメルカリとメルペイに新規登録する際に招待コードを使うと最大1500ポイント(1500円分)をもらえたので、その方法に...

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...