4/4 1画面ずつスクロールして進むウェブページを簡単作成 [ホームページ作成] All About

1画面ずつスクロールして進むウェブページを簡単作成(4ページ目)

企業の製品紹介サイトなどでは、画面全体に文字や画像を大きく配置し、1画面ずつスクロールして見せるデザインのウェブページをよく見かけます。そのような「1画面単位で滑らかにスクロールして画面が切り替わる」デザインのページを、jQueryを使って簡単に作成してみましょう。

オプション：スクロールスピードの調節

「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」の時点で作成したサンプルソースを元にして、速度を修正する記述を加えてあります。