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

本日はシンプルなパララックス対応のコンテンツスライダーをご紹介したいと思います。CSSアニメーションを使ってスライダー内の個々の要素をアニメーション化させます。それからスライダーの背景もアニメーション化させることによりパララックス効果を実現させます。

このアイデアはKendo UIのホームページを基にしています。この効果に対するリクエストやご質問を何件かいただいたので、再現してみることにしました。

HTMLマークアップ

スライダー内は複数のスライドで分かれていて、それぞれのスライドにはH2タグ、Pタグ、リンク用Aタグ、画像用DIVタグが含まれています。

<div id="da-slider" class="da-slider">
    <div class="da-slide">
        <h2>Some headline</h2>
        <p>Some description</p>
        <a href="#" class="da-link">Read more</a>
        <div class="da-img">
            <img src="images/1.png" alt="image01" />
        </div>
    </div>
    <div class="da-slide">
        <!-- ... -->
    </div>
    <!-- ... -->
    <nav class="da-arrows">
        <span class="da-arrows-prev"></span>
        <span class="da-arrows-next"></span>
    </nav>
</div>

このスライダーで大切なのは、各要素ごとのアニメーションです。それぞれのスライドに「direction class（方向クラス）」を与えることにより、個々の要素の動作を制御します。方向クラスにはスライド可能な向きに基づき４つの種類があり、例えば右にスライドさせるものには「da-slide-toright」クラスを適用させると言った具合です。

• .da-slide-fromright
• .da-slide-fromleft
• .da-slide-toright
• .da-slide-toleft

これらの方向クラスを割り当てることによって、個々の要素のアニメーションの制御が可能となります。

/* Slide in from the right*/
.da-slide-fromright h2{
    animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
    animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
    animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
    animation: fromRightAnim4 0.6s ease-in 0.8s both;
}
/* Adjust animations for different behavior of each element: */
@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

オプション

csliderプラグインをコールすれば以下のオプションも使用可能です。

$('#da-slider').cslider({
    current     : 0,
    // index of current slide
    bgincrement : 50,
    // increment the background position
    // (parallax effect) when sliding
    autoplay    : false,
    // slideshow on / off
    interval    : 4000
    // time between transitions
});

パララックス効果は、スライダーの背景を反対方向に移動させることで実現しています。「bgincrement」を使えば、何ピクセル移動させるかと言う事まで指定することが出来ます。

デモ

1. Demo 1: デフォルトのオプション
2. Demo 2: スライドショー（別のタイプのアニメーション）

☆CSSアニメーションやトランジッションをサポートしていないブラウザ用に、簡単なフォールバックを使用しています。

是非色々試してご活用くださいね。