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

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

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

この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。

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(方向クラス)」を与えることにより、個々の要素の動作を制御します。方向クラスにはスライド可能な向きに基づき4つの種類があり、例えば右にスライドさせるものには「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アニメーションやトランジッションをサポートしていないブラウザ用に、簡単なフォールバックを使用しています。

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

Facebook
Google+
Twitter
LinkedIn
Pinterest

ご相談ください

弊社では、案件のサイズに関係なくコストパフォーマンスの高いウェブ制作サービスを提供しております。

気軽にご相談ください。

Email: info@unilance.co.jp
Tel: 03 5830 7277

Wordpress、Laravel、React Natvieを得意としたウェブシステム開発会を行っております。社多言語対応も可!
気軽にお問合せください。

About

  • Stories
  • Community
  • Blog
  • Careers
  • Brand Assets

Downloads

  • Coming Soon...
  • Coming Soon...
  • Coming Soon...
  • Coming Soon...
  • Coming Soon...

© All rights reserved

Made with ❤ in Sugito, Saitama, Japan