ホームページ作成/レイアウトの作成・調整 (HTML,CSS)

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

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

今回は、jQueryプラグイン「jQuery Scrollable Link」とCSSを使って、1画面ずつスクロールして進む形のウェブページを簡単に作成する方法をご紹介致しました。ぜひ活用してみて下さい。

【関連記事】

【編集部おすすめの購入サイト】
Amazon でホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます