まだデータがありません。
画像にボーダーアニメーション効果を「Inset Border」
当ページのリンクには広告が含まれています。
スポンサーリンク
画像にボーダーアニメーション効果を追加するプラグイン「Inset Border」を紹介します。
jQueryプラグイン「Inset Border」
このプラグインを使って、ボーダーアニメーション効果を追加したい画像を指定すると、マウスオーバーした画像の周りにボーダーをふわっと浮かび上がらせることができます。
オプションとして、ボーダーの色、太さ、表示速度が指定できるので、サイトにおもしろいアクセントを加えることができるかも。
スポンサーリンク
デモでは、3タイプのボーダーアニメーションを用意しました。マウスオーバーしてみてください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Inset Border - jQueryプラグインまとめのカルマ</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.insetborder.js"></script>
<script>
$(document).ready(function(){
$('a.border1').borderEffect();
$('a.border2').borderEffect({borderColor : '#fff'});
$('a.border3').borderEffect({borderColor : '#eee', speed : 200, borderWidth: 20});
});
</script>
<style>
a {
display: inline-block;
}
img {
vertical-align: bottom;
}
</style>
</head>
<body>
<h1>Inset Borderのデモでーす。</h1>
<a href="#" class="border1"><img src="img.png"/></a>
<a href="#" class="border2"><img src="img.png"/></a>
<a href="#" class="border3"><img src="img.png"/></a>
</body>
</html>
jsファイルのダウンロードやその他にもたくさんのオプションがあります。詳細はこちらからどうぞ。
» Inset Border
スポンサーリンク