指定位置までスクロールするとレイヤーをにょきっと表示して注意を引くjQueryプラグイン m5noticeDisplay

指定位置までスクロールしたときにレイヤーを表示させることができます。

ブログを読み終わったあとに注意を引きたいレイヤーを表示して、ソーシャルサービス等への投稿などを促す効果も簡単に実装できます。（レイヤーの中身は別途必要です）

元ネタは、長谷川恭久さんのcouldから。「いかがでしたか？」というレイヤーが出てくるのですが同じような効果を簡単に実装できます。

上からにょきっと表示する以外にも、指定レイヤーをフェードやスライドで表示させたりできます。

• 動作サンプル a (上からにょきっと
• 動作サンプル b (フェード

必要なファイルを読み込む

jQueryとm5noticeDisplay.jsを読み込みます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/m5noticeDisplay.js"></script>

任意の要素に対して実行する

トリガーとする要素に対して実行します。トリガーとなる要素が画面内に入る直前あたりで注目させたいレイヤーを表示します。

HTML

<cite id="notice"><a href="http://ja.wikipedia.org/wiki/Www">via: World Wide Web - Wikipedia</a></cite>
<!-- ↑トリガー -->
~ (中略
<div id="noticeBlock">
  <h2>Thanks for your reading! </h2>
  <a href="http://b.hatena.ne.jp/entry/http://5509.me/log/m5noticedisplay" class="hatena-bookmark-button" data-hatena-bookmark-title="noticeDisplay" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
  <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://5509.me/log/m5noticedisplay" data-text="指定位置までスクロールするとレイヤーをにょきっと表示して注意を引くjQueryプラグイン m5noticeDisplay" data-count="horizontal" data-via="5509">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<!-- ↑これを表示する --> 

JS

jQuery(function($) {
  // トリガーに対して実行する
  $('#notice').m5noticeDisplay({
    // noticeBlockで表示するレイヤーを指定する(CSSセレクタで指定できます
    noticeBlock: '#noticeBlock'
  });
});

オプション

表示するレイヤー、アニメーションタイプなどを設定できます。

項目	値
noticeBlock	表示するレイヤー（ID推奨) (def – ‘#noticeBlock’
animateIn	表示アニメーション slide, slideDown, fadeInの中から （※後述）
animateOut	非表示アニメーション slide, slideUp, fadeOutの中から （※後述）
duration	アニメーションの速度 (def – 300
easing	好きなeasingを指定できます (def – ‘swing’
callback	表示後のコールバック関数

noticeBlockの指定要素について

JavaScriptが実行されるタイミングで非表示になりますが、チラつくのが気になる場合はCSS側でdisplay: none;にしておいてください。

animateInとanimateOutについて

slideDownとfadeInに関してはそのままの効果ですが、「slide」という値がデフォルトになっています。slideが指定されている場合は、noticeBlock要素は画面上部にposition: fixedで固定されているものとします。

例えばサンプルは以下のようにCSSで指定した#noticeBlockに対してm5noticeDisplayを実行しています。

#noticeBlock {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  color: #fff;
  background: #000;
  opacity: .9;
  line-height: 50px;
  text-align: center;
}

というわけでサンプルはどちらもIE6はCSS的に非対応です。

• 動作サンプル a (上からにょきっと
• 動作サンプル b (フェード