Day: April 12, 2012

本日はシンプルなパララックス対応のコンテンツスライダーをご紹介したいと思います。CSSアニメーションを使ってスライダー内の個々の要素をアニメーション化させます。それからスライダーの背景もアニメーション化させることによりパララックス効果を実現させます。 このアイデアはKendo UIのホームページを基にしています。この効果に対するリクエストやご質問を何件かいただいたので、再現してみることにしました。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ スライダー内は複数のスライドで分かれていて、それぞれのスライドにはH2タグ、Pタグ、リンク用Aタグ、画像用DIVタグが含まれています。 このスライダーで大切なのは、各要素ごとのアニメーションです。それぞれのスライドに「direction class（方向クラス）」を与えることにより、個々の要素の動作を制御します。方向クラスにはスライド可能な向きに基づき４つの種類があり、例えば右にスライドさせるものには「da-slide-toright」クラスを適用させると言った具合です。 .da-slide-fromright .da-slide-fromleft .da-slide-toright .da-slide-toleft これらの方向クラスを割り当てることによって、個々の要素のアニメーションの制御が可能となります。 オプション csliderプラグインをコールすれば以下のオプションも使用可能です。 パララックス効果は、スライダーの背景を反対方向に移動させることで実現しています。「bgincrement」を使えば、何ピクセル移動させるかと言う事まで指定することが出来ます。 デモ Demo 1: デフォルトのオプション Demo 2: スライドショー（別のタイプのアニメーション） ☆CSSアニメーションやトランジッションをサポートしていないブラウザ用に、簡単なフォールバックを使用しています。 是非色々試してご活用くださいね。