今日の人気記事

  1. レスポンシブなメニューを作成「MeanMenu」
  2. 数値のカウントアップ - さまざまなフォーマットに対応「Counter-Up」

画像にボーダーアニメーション効果を「Inset Border」

当ページのリンクには広告が含まれています。

スポンサーリンク

画像にボーダーアニメーション効果を追加するプラグイン「Inset Border」を紹介します。

jQueryプラグイン「Inset Border」

このプラグインを使って、ボーダーアニメーション効果を追加したい画像を指定すると、マウスオーバーした画像の周りにボーダーをふわっと浮かび上がらせることができます。

オプションとして、ボーダーの色、太さ、表示速度が指定できるので、サイトにおもしろいアクセントを加えることができるかも。

スポンサーリンク

デモでは、3タイプのボーダーアニメーションを用意しました。マウスオーバーしてみてください。

「Inset Border」のデモ

ソース(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

スポンサーリンク

関連記事(一部広告含む)