[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー

jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。

Parallax Content Slider with CSS3 and jQuery

[ad#ad-2]

• デモ
• 実装

デモ

一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。
分かりにくいかもしれませんが、背景もアニメーションで動いています。

デモページ：デフォルト

上記をスライドしたキャプチャ
画像は、h2要素やパラグラフから遅れて、アニメーションでスライドします。

デモページ：自動再生

[ad#ad-2]

アイデアの元となったのはKendo UIのサイトで使用されてるコンテンツスライダーです。

Kendo UI

こちらも当然パララックス対応のコンテンツスライダーです。
こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。

実装

実装は各ポイントとなる箇所を説明します。

HTML

スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。

<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>

CSS

このスライダーの核となるのは、エレメントごとのアニメーションです。アニメーションをコントロールするために方向を加えたclassを与えます。

右にスライドするものは「da-slide-toright」のようにし、4つのclassを設定します。

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

これらのclassに、エレメントをスライドさせるアニメーションを設定します。

/* 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; }
}

オプション

スクリプトのオプションでは、最初に表示するスライド、背景のポジション、自動再生の有無、アニメーションのタイミングなどを設定できます。

$('#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
 
});