jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。
はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「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コンテンツを作るためのテクニックを紹介していきます。
シリーズタイトルに「真面目に勉強」とうたっておりますが、地味で堅苦しい解説はほどほどにとどめ、とにかくコードを書いて動くものを作っていきます。
以下の質問のすべてに該当する方:
以上すべてに当てはまる方、この連載を楽しんでいただけるかと思います。
以下の質問に1つでも該当する方:
以上のいずれか1つでも当てはまる方、残念ながらこの連載はオススメできません。
パララックス(parallax)を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることにより、奥行き感を演出する効果を意味します。
アニメーションの世界では、白雪姫といったディズニー映画などで古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から演出の技法として使われています。
一般的にWebコンテンツにおけるパララックスエフェクトは、主にページをスクロールする際に画像などの各要素が異なるスピードで動くように制御することで、立体感を演出させるものを指します。
コーディングする環境は、UTF-8が扱えるテキストエディタならば、どれでも問題ありません。あなたの使い慣れたものを使用しましょう。
Webブラウザは、開発ツールが非常に高機能で使い勝手に優れている点からChromeを強くオススメしますが、Macユーザーの方はSafariでもほぼ同等の機能を使えます。Firefoxをお使いの方は、アドオンのFirebugをインストールしておくと良いでしょう。
Internet ExplorerはVer.9でも機能にやや問題があるため、当連載では基本的に対象外としていく予定です。
今回のサンプルファイルは、こちらからダウンロードできます。必要に応じてご参考ください。
早速、お使いのテキストエディタを開いて、下記の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ファイルはオフィシャルサイトのCDNを利用して読み込んでいます。ファイルそのものを直接ローカル環境にダウンロードしても問題ありませんが、管理するファイルが増えるのも手間なので、ネットワーク上から直接読み込む方を推奨します。
Copyright © ITmedia, Inc. All Rights Reserved.