Day: April 11, 2012

jQueryを使ったパララックススライダー

今回のチュートリアルでは動きのある画像スライダーをご紹介したいと思います。メインの選択画像をスライドさせる時に、立体感を出す為複数の背景レイヤーにパララックス(視差)の原理を使用しています。こうすることにより、画像が切り替わる時に素晴らしい奥行き感を実現することが出来ます。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 デモ内で使用しているきれいな画像はTetsumoさんのFlickrからお借りしています。 それでは早速始めましょう! HTMLマークアップ HTMLの構造としては、まず一番外側の大本のコンテイナーに「pxs_container」というクラスを設定しています。パララックス効果を実現させるためには3枚の背景が必要になるので、背景にもそれぞれラッパーを追加します。奥行きを持たせる為にそれぞれの背景画像が移動するのを「見える」ようにしたいので、透過度を加えます。 それからローディング要素と、フルサイズ画像とサムネイル画像用にULリストを2つ加えます。最後にナビゲーション要素も追加します。 さて、次にスタイリングを見てみましょう。 CSSスタイリング まずは大本のメインコンテナーの設定からです。スライダーの幅はページ全体を利用したいので100%に設定します。メインコンテナー内部の要素は全て絶対配置させるので、メインコンテナーは相対配置にしておきます。(内部の要素はページに対してではなくコンテナを基準にして配置したい感じです。) パララックス用の背景画像をラッピングしているDIV要素には、「背景画像繰り返し」の設定をします。ここで使用している画像はシンプルなグラデーション画像です。 ラッパー内部のDIVタグは、以下のスタイルプロパティを共通で設定します。 幅はJavaScriptで動的に設定します。背景DIVタグ1つ1つにそれぞれ異なる背景画像を割り振っています。 残りの要素も動的に設定するのですが、それはまた後でご説明するとして、まずは他の要素をのスタイリングを確認しましょう。 下記のラッパーは、初めは見えない状態にセットしてあります。 この中には最初にロードしておきたい要素全てが含まれていて、ロードが完了してから初めてラッパーとコンテンツが表示されるようにしたいのです。 2つのULリストもリセットしておきましょう。 このスライダー用リストでのこだわりは、LI要素内のコンテンツをページ幅全体に表示させることです。なので実際画面上で表示されているスライダーは、1つのLI要素の全体像なんです。ULリストの幅は、Window幅と画像の数に応じて動的に変化するようにしてあります。LIタグを「float:left;」に設定して動的なUL幅を用意することで、LI要素はきちんと横並びに整列してくれます。 LIタグ内のスライド画像は、左右にオートマージンを設定して水平方向でセンタリングさせています。 透明のボーダーとボックスシャドウを追加して、画像の周りにガラス枠があるように演出します。 サムネイルリストも絶対配置です。「left:50%;」を設定しているのは、JavaScriptにより動的幅やレフトマージンが負の値になってもきちんとセンタリングさせたいからです。 サムネイルの周りには白い枠線を加えて、自然なボックスシャドウも追加しています。 選択されているサムネイル画像は、不透明にしてクッキリ表示させています。 2つのナビゲーションスパンには以下の様に共通の設定を施します。 それから矢印を加えます。 画像の左端と右端に表示させたいので、左矢印(pxs_prev)右矢印(pxs_next)要素も動的に設定します。 最後にローディング部分がきちんと真ん中に表示されるように設定してお終いです。 これでスタイリングは完成です。最後にjQueryを仕上げましょう! JavaScript 今回のスライダーで大切なのは勿論画像をスライドさせることなのですが、それだけではなくて奥行きを持たせる為に3枚の背景画像をそれぞれ別々にアニメーション化させる必要があります。例えば次の画像に移動する時、スライダー用のULタグの左の値はWindow幅分マイナスに差し引かれます(すなわちこれが一つのLIタグ分の幅と言う事になります。)。それから一番手前の背景用のDIVタグもアニメーション化させるのですが、これはWindow幅の半分しか動かしません。2枚目の背景画像はWindow幅の1/4だけ・・・とそんな感じになります。なので奥の背景画像ほど、動く幅は少なくなるというのがパララックスの原理の基本です。 スクリプト外でプラグインを作成したいので、先にいくつかのオプションを定義しておきましょう。手始めに最も重要な要素をキャッシュします。 スライダー用には以下のスクリプトを追加します。 スライダー用のオプションはこんな感じになります。 auto: 周期的にコンテンツをスライドさせる秒数(0の場合は自動再生は無効) speed: 各スライドのアニメーション速度 easing: スライドアニメーションのイージング(緩和)効果 easingBg: 背景アニメーションのイージング効果 circular: 円形スライダー thumbRotation: サムネイルがランダムに回転 以上で完成です!今回のチュートリアル、お楽しみいただけましたか?是非活用してみてくださいね。

詳細を読む »