[JS]簡単な実装でパネルを天地左右からアニメーションで表示するスクリプト -notifyMe

サイト構築 -JavaScript

Post on:2014年10月31日

notifyMeのデモ

デモページ下部のボタンをクリックすると、それぞれ天地左右からパネルがアニメーションで表示されます。

デモページ

デモではボタンのクリックがトリガーになっていますが、画像やテキスト、ホバーなどに変更することも可能です。

notifyMeの使い方

Step 1: 外部ファイル

当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。

<head>
  ...
  <link rel="assets/css/notifyme.css" type="text/css" />

</head>
<body>
  ...
  <script type="text/javascript" src="assets/js/jquery.js"></script>
  <script type="text/javascript" src="assets/js/notifyme.js"></script>
</body>

Step 2: HTML

トリガーとなる要素にclassを加えます。

<a class="default">Default</a>

Step 3: JavaScript

jQueryのセレクタで要素を指定しアクション（click）を設定し、表示させるパネルを設定します。

$('.default').on('click', function(){
    $(this).notifyMe(
        'right', // 表示位置
        'default', // パネルのタイプ
        'タイトル', // タイトル
        'テキスト', // テキスト
        200 // 速度
    );
});