このブログではロゴや記事中の画像などにホバーすると一瞬だけ点滅する(光る)ような感じのエフェクトをつけているんですが、先日この実装方法についてご質問をいただいたので、その回答も兼ねてご紹介します。
現在使用しているのはCSSで実装したものですが、以前はjQueryを使用して実装していたのでそれぞれの方法を紹介したいと思います。
November 26, 2014 追記
- CSSの記述についてManaさんからコメントいただいたので追記しました。
実際の動きは以下デモで確認できます。
CSSで実装する
CSSで実装したい場合はopacity
を使った透過処理をanimation
, @keyframes
を使ったアニメーションと組み合わせる形で実装できます。
a:hover {
opacity: 1;
-webkit-animation-duration: 1s;
-webkit-animation-name: flash;
animation-duration: 1s;
animation-name: flash;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
上記を記述することで、a
要素にホバーした時に一瞬だけ点滅するようなエフェクトを実装することができます。
もっと点滅を早くしたいなど動きを変えたい場合は、animation-duration
の秒数や@keyframes
の0%
で指定しているopacity
の値を調整してみてください。
追記: ショートハンドでの記述方法を追記しました
WebクリエイターボックスのManaさんから“ショートハンド使えばスッキリする”とコメントをいただき、たしかにその通りなので追記しました。(ご指摘ありがとうございます)
先ほどのコードでanimation
を記述している箇所は、下記のように短く記述することもできます。
a:hover {
opacity: 1;
-webkit-animation: flash 1s;
animation: flash 1s;
}
jQueryで実装する
jQueryで実装する場合でも基本的にCSSとやっていることは同じで、opacity
を使った透過処理を.animate()
を使ってアニメーションしているものになります。
jQueryを使用するので予め読み込ませおき、下記のように記述します。
$(function() {
$('a').mouseover(function(){
$(this).css('opacity', '.4').animate({'opacity': '1'}, 'slow');
});
});
もう少し動きを変更したいという場合は、slow
と記述されている部分や.css()
で指定しているopacity
の値を調整することで変更できます。