【JavaScript】1ページスクロールを実装するプラグインdocSlider.js【jQuery不要】
はじめに
JavaScriptでプラグインを制作したのでご紹介します。
1ページスクロールを実装するためのプラグインです。
特徴
使い方
ファイルのダウンロード
配布サイトからファイルをダウンロードします。
CSSとJSの読み込み
ダウンロードしたCSSとJSファイルを読み込みます。
JSファイルは</body>
直前に置いてください。
<link rel="stylesheet" href="docSlider.css">
<script src="docSlider.min.js"></script>
HTMLタグの記述
<div class="docSlider"> <section>...</section> <section>...</section> <section>...</section> </div>
docSliderの初期化
読み込んだJSファイルのすぐ下に追記してください。
必要に応じて、後述のオプションを指定してください。
<script>docSlider.init();</script>
オプション
オプション | 型 | 初期値 | 備考 |
---|---|---|---|
speed | int | 600 | ページの切り替え速度(ミリ秒) |
easing | string | "ease" | ページの切り替えアニメーション CSSの「transition-timing-function」に相当。 |
pager | boolean | true | ページャの有無. |
horizontal | boolean | false | 水平モード |
startSpeed | int | null | 外部ページから指定のページに遷移してきた場合のページ切り替え速度(ms) 未設定でページ切り替え速度(speed)と同じ値になる。 |
scrollReset | boolean | false | ページにスクロールバーが出ている場合、ページを切り替えるとスクロール位置をリセットする |
complete | function | コールバック関数、docSliderが初期化されると呼び出される | |
beforeChange | function | コールバック関数、ページが切り替わる前に呼び出される | |
afterChange | function | コールバック関数、ページが切り替わった後に呼び出される |
オプション設定の
// ページ切り替え速度とアニメーションを変更 docSlider.init({ speed : 500, easing : 'ease-in-out' });
メソッド
メソッド | 引数 | 備考 |
---|---|---|
jumpPage | to, speed, easing | 指定したページに移動 |
nextPage | speed, easing | 次のページに移動 |
prevPage | speed, easing | 前のページに移動 |
getOptions | - | 設定されたオプションを取得(オブジェクト型) |
getElements | - | スライダーの要素を取得(オブジェクト型) |
getCurrentIndex | - | 現在のページのインデックスを取得 |
getCurrentPage | - | 現在のページの要素を取得 |
enable | toggle (boolean) | docSliderの操作の無効/有効化 |
メソッドの例
docSlider.jumpPage(2); // index2のページ(3ページ目に移動) docSlider.jumpPage('bar'); // #barのページに移動
id名で移動する場合は、各ページにidを指定してください。
<div class="docSlider"> <section id="foo">...</section> <section id="bar">...</section> <section id="baz">...</section> </div>
キーボード移動対応
以下のキー入力でページを移動できます。
キー | 備考 |
---|---|
[ Space ] / [ PageDown ] / [ ArrowDown ] | 下スクロール、次のページ |
[ Shift ] + [ Space ] / [ PageUp ] / [ ArrowUp ] | 上スクロール、前のページ |
[ End ] | 最後のページ |
[ Home ] | 最初のページ |
[ Tab ] | 次のページ |
[ Shift ] + [ Tab ] | 前のページ |
[ ArrowRight ] | 次のページ(水平モードのみ) |
[ ArrowLeft ] | 前のページ(水平モードのみ) |
外部のサイトから指定のページに移動
ハッシュタグ付きのリンクを指定します。
<a href="index.html#bar">#bar のページに移動</a>
※移動させたいページに予めidを指定しておいてください。
<div class="docSlider"> <section id="foo">...</section> <section id="bar">...</section> <section id="baz">...</section> </div>
スクロール要素対応
ページの中にスクロールするボックスがある場合、クラス名「docSlider-scroll」を付けるとマウスホイールイベントの競合を回避できます。
<div class="docSlider-scroll"> スクロールバーの出ているボックス </div>
まとめ
かなり内容を端折りましたが、ざっくりと使い方のまとめでした。
細かい機能やカスタマイズなどの説明はドキュメントページ(英語)をご覧ください。