オプション：スクロールスピードの調節
「jQuery Scrollable Link」では、画面単位のスクロール速度が800ミリ秒(0.8秒)に設定されています。この速度は、自由に変更ができます。カスタマイズするには、HTML側に望みのミリ秒を追記する方法と、JavaScriptソース自体を書き換える方法があります。■HTMLのリンク(a要素)に、望みの秒数を指定する方法
リンクを作るa要素に、「data-speed」という属性を加えることで、望みの秒数(ミリ秒)を指定できます。例えば、以下のように記述します。
<a href="#page1" class="scrollable" data-speed="2500">PAGE.1</a>上記の場合は「2500ミリ秒」(＝2.5秒)になり、かなりゆっくりとしたスクロールになります。この方法での指定は、リンクごとに異なる秒数を指定できるメリットがあります。
■JavaScriptソースを修正して、デフォルトの秒数を変更する方法
すべてのリンクの速度を一括変更したいなら、HTMLに属性を付加するよりもJavaScriptソースを修正する方が楽です。 「jQuery Scrollable Link」の本体であるjquery.scrollablelink.jsファイルをテキストエディタで開くと、17行目に以下の記述が見えます。
var speed = $anchr.data('speed') || 800;
この行末にある「800」の部分が、デフォルトの秒数(ミリ秒)です。ここを自由に書き換えれば、デフォルトの秒数を変更できます。上記の両方の方法でスクロール速度を変更したサンプルページを用意しました。閲覧してみる場合は、「速度を修正したサンプルページ」をご覧下さい。本記事2ページ目の「手順4」の時点で作成したサンプルソースを元にして、速度を修正する記述を加えてあります。
1画面ずつスクロールして進むウェブページを簡単に作成
今回は、jQueryプラグイン「jQuery Scrollable Link」とCSSを使って、1画面ずつスクロールして進む形のウェブページを簡単に作成する方法をご紹介致しました。ぜひ活用してみて下さい。【関連記事】
- スクロールしても自動で付いてくるサイドバーを作る
- スムーズスクロールでページ内リンクを分かりやすく
- 数秒ごとに1行ずつ縦スクロールするティッカーを作る
- 閲覧者がスクロールするまで画像の読み込みを待つ方法
- 複数の画像がふわっと切り替わるスライドショーを作る
