[JS]多彩なアニメーションを備えたスライドショーがスクリプトを一行も書かずに実装できるスクリプト -Cycle.js

サイト構築 -JavaScript

Post on:2013年1月25日

sponsorsr

スクリプトもスタイルシートも書かずに、多彩なアニメーションで画像がスライドするスライドショーを実装できるスクリプトを紹介します。
こういう実装方法がこれから増えてくるかもしれませんね。

Cycle.js
Cycle.js -GitHub

対応ブラウザは下記の通り。

IE8+
Chrome
Firefox
Safari
Opera

TODOとして、ARIAのサポート、キーボード操作、IE7対応、エフェクトの追加を予定しているそうです。

いつもは、デモ、使い方、の順番で紹介していますが今回はデモと使い方を併せてご紹介。

Cycle.jsのセットアップ
Cycle.jsのバリエーション

Cycle.jsのセットアップ

ベースとなるHTMLは非常にシンプルです。
スタイルシートをhead内に、スクリプトを</body>の上に外部ファイルとして記述します。




    <title>Cycle.js</title>
    
    


    <!-- Your HTML goes here -->

Cycle.jsのバリエーション

まずは基本となるベーシックから。

ベーシック

画像をdiv要素で内包し、スライドショーの枠をdivで設置するだけです。あとは各要素にclassを付与するだけで実装できます。

<div class="cycle">
    <div class="cycle-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
</div>

スライド

画像がアニメーションでスライドするタイプです。親となるdiv要素に「slide」を付与するだけです。

<div class="cycle slide">
    <div class="cycle-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
</div>

スライドアップ

垂直方向のスライドするタイプで、「slide up」を付与します。

<div class="cycle slide up">
    <div class="cycle-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
</div>

クロスフェード

画像がフェードで切り替わります、これも簡単で「xfade」を付与するだけです。

<div class="cycle xfade">
    <div class="cycle-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
</div>

スライドダウンクロスフェード

スライドとフェードを合わせたタイプ、これもclassを付与するだけです。

<div class="cycle xfade slide down">
    <div class="cycle-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
</div>

コントローラー付き

最後はコントローラー付きのタイプ。nav要素をそのまま記述するだけでサークル状のコントローラーが利用できます。

<div id="controlCycle" class="cycle slide">
    <div class="cycle-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
    <nav>
        <a class="cycle-control" href="#controlCycle">
            <i class="icon-chevron-left"></i>
        </a>
        <a class="cycle-control right" href="#controlCycle">
            <i class="icon-chevron-right"></i>
        </a>
    </nav>
</div>

HTMLだけの変更で簡単に実装することも可能ですが、スクリプトのオプションを変更することでアニメーションのタイミングやスピードなども簡単に調整できます。