[JS]ページをスクロールするとパネルがアニメーションで表示されるスクリプト -SlideNote

設置も簡単、カスタマイズも簡単、ページをスクロールするとパネルがアニメーションで表示されるスクリプトを紹介します。

SlideNote
デモページ

[ad#ad-2]

デモではページを下にスクロールすると、パネルがアニメーションでスライド表示されます。
※キャプチャは瞬時に上に移動して撮りました。

SlideNoteの実装

スクリプトのセットアップ

「jquery.js」と「jquery.slidenote.js」を外部ファイルとして指定します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.slidenote.js" type="text/javascript"></script>

エレメントのセットアップ

スライド表示するエレメントをスクリプトで指定します。

$('#note').slideNote(); // a single element
$('.notes').slideNote(); // a set of elements

[ad#ad-2]

スクリプトのオプション

where

パネルを表示するのに必要なスクロール量

corner

パネルを表示するコーナー

url

パネルに表示するコンテンツのデータ

container

urlで指定したコンテンツに適用するid名

closeImage

クローズボタンに使用する画像のパス

オプションを使った記述例は、下記のようになります。

スクリプトのオプションの記述例

$('#myNotification').slideNote({
  where: 640,
  corner: 'left',
  url: 'ajax.html',
  container: 'note',
  closeImage: '/images/close.png'
});