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をベースとしていきます。

jQueryの読み込み

　上記テンプレートでは、jQueryファイルはオフィシャルサイトのCDNを利用して読み込んでいます。ファイルそのものを直接ローカル環境にダウンロードしても問題ありませんが、管理するファイルが増えるのも手間なので、ネットワーク上から直接読み込む方を推奨します。

HTML5�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ鬮ｯ蜿･�ｹ�｢�ｽ�ｽ�ｽ�ｽX 鬯ｯ�ｮ�ｽ�ｫ�ｽ�ｽ�ｽ�ｪ鬮ｯ蛹ｺ�ｻ繧托ｽｽ�ｿ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｺ鬮｣蛹�ｽｽ�ｵ髫ｴ竏ｵ�ｺ�ｷ�ｽ�ｸ�ｽ�ｷ�ｽ�ｽ�ｽ�ｹ髫ｴ雜｣�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｳ鬯ｩ蟷｢�ｽ�｢�ｽ�ｽ�ｽ�ｧ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｭ鬯ｩ蟷｢�ｽ�｢髫ｴ雜｣�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｳ鬯ｩ蟷｢�ｽ�｢�ｽ�ｽ�ｽ�ｧ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｰ

鬯ｮ�ｫ�ｽ�ｴ髯晢ｽｷ�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｬ鬯ｮ�ｫ�ｽ�ｴ鬯ｲ�ｽ�ｼ螟ｲ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�･鬯ｮ�ｫ�ｽ�ｴ髯晢ｽｶ�ｽ�ｷ�ｽ�ｽ�ｽ�｣�ｽ�ｽ�ｽ�ｯ鬮｣蜴�ｽｽ�ｫ�ｽ�ｽ�ｽ�｣