| web creators特別号 |
| いますぐ悩みが解決する！ Webデザイン仕事で役立つ54のアイデア |
デザイン＆レイアウト 1-07
パララックス効果のユニークなスクロール
重ね合わせた複数の背景を異なる速度でスクロールさせることで、視覚的な奥行きを表現するパララックス。jQueryプラグインを利用して簡単にパララックス効果をデザインに取り入れよう。
制作・文／高橋としゆき（Graphic Arts Unit）
BROWSER IE…8over Firefox…4over Safari…3.6over Chrome…10over
01
パララックスとは、視覚的なずれを利用して画面の奥行きを表現する手法だ【1-1】。最近ではスクロールと連動して動くサイトをひとくくりとしてパララックスと呼ぶことが多いが、今回は複数の背景が異なる速度でスクロールする、最も基本的なパララックスを実現する【1-2】。
【1-1】重なっているものを異なる視点から見るとずれが生じる。このような視点による見え方のずれを「パララックス」と呼ぶ。
【1-2】パララックスの原理は風景の動きに見立てると分かりやすい。手前にあるものほど早く動くという視差を利用した奥行き表現の手法だ。
02
制作に入る前に、今回のパララックスの仕組みを理解しよう。サイズが同じ要素を2つ重ね合わせ、それぞれの背景を異なる速度でスクロールさせることで視覚的な奥行きを表現する【2-1】【2-2】。
今回は、背景のスクロール速度をコントロールするために「jQuery-Parallax」というプラグインを利用する。
【2-1】div.sectionとdiv.bgLayerの背景画像を重ねることでひとつの背景に合成。これらを異なる速度でスクロールさせてパララックスを実現する。
【2-2】セクションひとつ分の構成。セクション全体を囲むdiv.sectionの中に、コンテンツ内容となるdiv.contentが入った単純なものだが、その間にdiv.bgLayerをJavaScriptで差し込む。
03
まずHTML から作成しよう。Githubから「jQuery-Parallax(https://github.com/IanLunn/jQuery-Parallax)」をダウンロードし、「jQuery」本体とともにhead要素で読み込む【3-1】。
さらに、アニメーションスクロールを実現す るために「jQuery.scrollTo(https://github.com/flesler/jquery.scrollTo)」を使用するので、こちらもGithub からダウンロードして読み込む。
ページの内容は、ヘッダの下に内容セクションとなるdiv 要素が3 点縦に並び、最下部にフッタが配置された形だ。
【3-1】「jQuery-Parallax」と「jQuery.scrollTo」をそれぞれ、head要素で読み込む。ページの内容は、ヘッダ、コンテンツ（セクション3 点）、フッタで構成される。
04
次にJavaScriptを使って、それぞれのdiv要素の中に背景用のdiv要素を差し込む【4-1】。差し込んだ後の構成は【4-2】のような状態になる。このように、親div要素と差し込んだdiv要素にそれぞれ別の背景を指定することで、複数の背景が重なった状態を作る。
【4-1】
【4-2】手前側の背景となるdiv.bgLayerを挿入する。重なり的には、div.sectionとdiv.content の間に挟まるようになる。
05
続いてCSS を記述する内容セクションとなるdiv要素の高さは1,000pxとする。使用する背景画像も高さ1,000px のものを用意しよう
JavaScriptで挿入するdiv要素は、絶対配置で親div 要素とまったく同じ位置、大きさになるようにしておこう。
各要素の背景には「backgroundposition:fixed」を指定する。この指定は「jQuery-Parallax」を利用するために必要な処理なので注意しよう【5-1】【5-2】。
【5-1】セクションとその内容についてのスタイル。セクションの高さを1,000pxに固定し、各背景画像を指定する。背景は位置を「fixed」にしておこう。
【5-2】各セクションの状態。合成された2つの背景の上に内容が乗っている。
06
HTML に戻り、「jQuery-Parallax」を動作させるための記述を行う。head要素内に【6-1】のスクリプトを記述しよう。
2番目の引数がスクロール速度の設定だ。「1」は通常のスクロールで、それ以下になるほど速度が遅くなる。
数字をマイナスにして逆向きにスクロールさせることも可能だ【6-2】。引数をいろいろと変更し、イメージに合う速度を設定しよう。
今回は、奥側の背景を表示するdiv.sectionのスピードを通常の10％、手前側の背景を表示するdiv.bgLayerを通常の30％の速度となるように設定した。この速度のずれによって画面に奥行きを表現した。3つのセクションそれぞれのスクロール速度を個別に変更し、すべてをバラバラにすることも可能だが、今回のように各セクションが統一されたデザインでは、できるだけ速度を統一させておく方が自然だろう。
【6-1】「jQuery-Parallax」を有効にして、各要素の背景のスクロール速度を調節する処理。最後の行では、初期画面構築のために、jQueryのtriggerメソッドを使ってスクロールイベントを一度だけ発生させている。
【6-2】「jQuery-Parallax」を有効化する書式。パラメーターでスクロール速度や背景の位置を調節できる。
[目次に戻る]
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。
※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。
