指定位置へのスクロールでにゅっと出てくる Promo Slide の使い方（jQuery）

posts_photo
Promo Slide

今回紹介するのは、特定位置までスクロールさせると右側からにゅっと情報を出せるjQueryプラグイン「Promo Slide」！
記事の最後に出て来るように設定して、SNSボタンを表示させたり、おすすめ記事を紹介したりと色々活用出来るのではないでしょうか。CSSをいじればスライドの形も自由にデザイン出来るので、単なる情報表示としてだけではなく何かしらの表現に使うことも出来る気がします。
では、非常に簡単な使い方を紹介していきましょう。

必要なものを公式からダウンロードして読み込む

必要なものはこちらGitHubで配布されています。ここでダウンロードするソースにはいろいろ入っていますが必要最低限の部分だけ記述していきますね。読み込むファイルは以下の３つです。

<link rel="stylesheet" href="promoSlide.css" type="text/css" media="screen" />
<script src='jquery-1.10.2.min.js'></script>
<script src='jquery.promoSlide.js'></script>

Promo Slideを動かす！

必要ファイルを読み込んで、以下の記述をするだけで動きます。
スライドが飛び出す位置はタグやidで指定、スライドのhead部分に入れるテキストとbody部分に入れるテキストを入力します。ここには通常のhtmlと同じようにタグを入れる事も出来るので、リンクや画像も配置可能です。スライド自体のデザインはpromoSlide.cssで変更可能です。

$('#test').promoSlide({
      headerText: "Promo Slide",
      bodyText: "ページ終わりにスライドインします。"
});

なんとなく見たところによると、指定したタグからtop/bottom共に50pxくらいの余白を持ってスライドが出る仕様みたいですねー。

まとめたコード

全部まとめたコードは以下になります。 

<head>
<title>Promo Slide</title>
<link rel="stylesheet" href="promoSlide.css" type="text/css" media="screen" />
</head>
<body style="height:1500px;">
<!--高さを指定しているのはスクロールする高さを持たせるためだけです-->
<script src='jquery-1.10.2.min.js'></script>
<script src='jquery.promoSlide.js'></script>
<script>
$('#test').promoSlide({
      headerText: "Promo Slide",
      bodyText: "ページ終わりにスライドインします"
});
</script>
</body>

以上、参考になれば幸いです。
では！

”jQuery”タグの他の記事を見る