指定した要素を点滅「Modern Blink」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した要素を点滅・瞬かせるjQueryプラグイン「Modern Blink」を紹介します。
jQueryプラグイン「Modern Blink」
このプラグインの特徴は、オプションで点滅させる回数を指定したり、クリックアクションで点滅を操作できるところです。
要素やクラス名とオプションを指定するだけで、とても簡単なので、サイトのアクセントにいかがでしょうか。
スポンサーリンク
デモでは、「ずーっと点滅」「5回点滅」「ボタンアクションで点滅」を紹介しています。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Modern Blinkのデモでーす。">
<title>Modern Blink - jQuery Plugin Demo</title>
<style>
div {
margin: 5px;
padding: 5px;
float: left;
width: 200px;
height: 200px;
}
div:nth-child(even) {
border: solid 1px red;
}
div:nth-child(odd) {
border: solid 1px blue;
}
</style>
</head>
<body>
<h1>Modern Blinkのデモでーす。</h1>
<div class="js-blink-infinite">ずーっと点滅します。</div>
<div class="js-blink-5">5回点滅します。</div>
<div class="js-blink-manual">ボタンで点滅の開始・停止を操作します。</div>
<button class="js-btn-start">点滅開始</button>
<button class="js-btn-stop">点滅停止</button>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="jquery.modern-blink.js"></script>
<script>
jQuery(function($) {
$('.js-blink-infinite').modernBlink();
$('.js-blink-5').modernBlink({
iterationCount: 5
});
$('.js-blink-manual').modernBlink({
auto: false
});
$('.js-btn-start').on( 'click', function() {
$('.js-blink-manual').modernBlink('start');
});
$('.js-btn-stop').on( 'click', function() {
$('.js-blink-manual').modernBlink('stop');
});
});
</script>
</body>
</html>
スポンサーリンク