今日の人気記事

まだデータがありません。

指定した要素を点滅「Modern Blink」

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

スポンサーリンク

指定した要素を点滅・瞬かせるjQueryプラグイン「Modern Blink」を紹介します。

jQueryプラグイン「Modern Blink」

このプラグインの特徴は、オプションで点滅させる回数を指定したり、クリックアクションで点滅を操作できるところです。

要素やクラス名とオプションを指定するだけで、とても簡単なので、サイトのアクセントにいかがでしょうか。

スポンサーリンク

デモでは、「ずーっと点滅」「5回点滅」「ボタンアクションで点滅」を紹介しています。

「Modern Blink」のデモ

デモのソース（HTML + jQuery）

ソースを表示
印刷SyntaxHighlighterについて
<!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>

jsファイルのダウンロード、その他オプションはこちらからどうぞ。

スポンサーリンク

関連記事（一部広告含む）