今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. ExcelのようにTableが編集できちゃう「Handsontable」
  3. 簡単実装!シンプルなアコーディオンメニュー「Accordion」
  4. テーブルのヘッダー(th)がついてくる「Mr.StickyTableHeaders」

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

スポンサーリンク

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

jQueryプラグイン「Modern Blink」

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

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

スポンサーリンク

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

「Modern Blink」のデモ

デモのソース(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>
スポンサーリンク

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