パララックスエフェクトの基本：jQuery×HTML5×CSS3を真面目に勉強（1）（1/4 ページ）

jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。

» 2013年03月22日 14時40分公開

[山田　直樹，クラスメソッド]

Webサイトの55％で利用されているjQuery

　はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。

　2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。

　さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れる環境が整ってきました。

　また、ブラウザ間の実装の差異など、JacaScriptが抱える良くも悪くも不安定な仕様を極限まで吸収してくれる救世主のようなフレームワークの登場により、JavaScriptの存在価値は決定的なものとなりました。ご存じ、jQueryです。

　2006年8月に最初の安定版がリリースされて以来、瞬く間に採用実績を伸ばし、ついには全Webサイトの55％で利用されているとの調査結果も発表されました。

　本連載では主に、jQueryをメインにHTML5やCSS3を使ったリッチなWebコンテンツを作るためのテクニックを紹介していきます。

　シリーズタイトルに「真面目に勉強」とうたっておりますが、地味で堅苦しい解説はほどほどにとどめ、とにかくコードを書いて動くものを作っていきます。

この記事を読むのにふさわしい人は？

　以下の質問のすべてに該当する方：

HTMLおよびJavaScriptの経験があるWebデザイナーもしくはコーダーであって、ご自身のWebページを次のレベルに持って行きたいと願っている方
単純なHTMLページをリッチインタラクションを持つWebコンテンツに変えたいと考えている方。つまりJavaScriptやHTML、CSSの基本的な知識を習得するだけでは物足りない方
とにかくWebブラウザ上で動くものを作って楽しみたいという方

　以上すべてに当てはまる方、この連載を楽しんでいただけるかと思います。

この連載におそらくは向いていないと思われる人

　以下の質問に1つでも該当する方：

変数やループ、配列といったプログラミングの基本的な作法をまったく知らない方
あくまで基本的な知識を地道にかつ体系的に学習したいという方
画面が縦横無尽に動くといったインパクト重視のWebコンテンツばかり作るなんてありえないと考えている方

　以上のいずれか1つでも当てはまる方、残念ながらこの連載はオススメできません。

パララックスで奥行き感を演出

　パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることにより、奥行き感を演出する効果を意味します。

　アニメーションの世界では、白雪姫といったディズニー映画などで古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から演出の技法として使われています。

　一般的にWebコンテンツにおけるパララックスエフェクトは、主にページをスクロールする際に画像などの各要素が異なるスピードで動くように制御することで、立体感を演出させるものを指します。

プログラムを書く準備

　コーディングする環境は、UTF-8が扱えるテキストエディタならば、どれでも問題ありません。あなたの使い慣れたものを使用しましょう。

　Webブラウザは、開発ツールが非常に高機能で使い勝手に優れている点からChromeを強くオススメしますが、Macユーザーの方はSafariでもほぼ同等の機能を使えます。Firefoxをお使いの方は、アドオンのFirebugをインストールしておくと良いでしょう。

　Internet ExplorerはVer.9でも機能にやや問題があるため、当連載では基本的に対象外としていく予定です。

サンプルファイルのダウンロード

　今回のサンプルファイルは、こちらからダウンロードできます。必要に応じてご参考ください。

HTMLのテンプレート

　早速、お使いのテキストエディタを開いて、下記のHTMLを書いてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning Parallax effect</title>
</head>
<body>
     ここにいろいろと書いていく・・・
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</body>
</html>

　以降でご紹介していくサンプルコードは、このHTMLをベースとしていきます。