[JS]簡単な実装でパネルを天地左右からアニメーションで表示するスクリプト -notifyMe
Post on:2014年10月31日
sponsorsr
表示ページの天地左右からアニメーションでスライド表示するパネルを実装するjQueryのプラグインを紹介します。
notifyMeのデモ
デモページ下部のボタンをクリックすると、それぞれ天地左右からパネルがアニメーションで表示されます。
デモではボタンのクリックがトリガーになっていますが、画像やテキスト、ホバーなどに変更することも可能です。
notifyMeの使い方
Step 1: 外部ファイル
当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。
[html]
...
...
[/html]
Step 2: HTML
トリガーとなる要素にclassを加えます。
[html]
Default
[/html]
Step 3: JavaScript
jQueryのセレクタで要素を指定しアクション（click）を設定し、表示させるパネルを設定します。
[html]
$('.default').on('click', function(){
$(this).notifyMe(
'right', // 表示位置
'default', // パネルのタイプ
'タイトル', // タイトル
'テキスト', // テキスト
200 // 速度
);
});
[/html]
sponsors
