[JS]パララックスもApple風スライダーもOK、エレメントごとに動作が設定できるスライダー -Sequence.js

サイト構築 -JavaScript

Post on:2012年2月21日

Sequence.jsの特徴

エレメント単位で設定できるCSS3アニメーションを使ったスライダーです。
オープンソース。
すべてのモダンブラウザをサポート。
スマートフォンなどのタッチデバイスをサポート。
古いブラウザでも機能します。
※IE7とFirefox3.6でもテスト済み。
セマンティックなマークアップ。
Responsive Web Design対応。

Sequence.jsのデモ

デモページはCSS3アニメーションに対応しているFirefox, Chrome, Safariでご覧ください。
IE7やFirefox3.6などの古いブラウザはアニメーション無しで動作します。

まずは、シンプルなスライダーから、と言っても一味違いますが。
コンテンツが左右のスライド方向に対応して、フェードしながら左右にスライドします。
キーボードの矢印キーの操作も可。

Demo: Modern Slide In

[ad#ad-2]

二つ目は、パララックスのデモです。
パララックスは複数の画像（レイヤー）を使用してタイミングをずらして視差効果を生み出し、奥行き感を出すものです。

Demo: Sliding Horizontal Parallax

最後は、AppleのiPhoneページに使用されているようなスライダーです。
スライドごとに最適な方向からアニメーションで表示します。

Demo: Apple Style

Sequence.jsの使い方

実装は、ごく簡単に紹介します。

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/sequence.js"></script>

JavaScript

<head>内でスクリプトの初期設定をします。

<script type="text/javascript"> 
    $(document).ready(function(){
        var sequence = $("#sequence").sequence(options);
    }
</script>

HTML

基本となるHTMLの構造で、idを付与したdiv要素とul要素から構成されています。リストの各項目がスライダー内のフレームとして利用されます。

<div id="sequence">
    <ul>
        <li>
            <!--Frame 1 content here-->
        </li>
        <li>
            <!--Frame 2 content here-->
        </li>
        <li>
            <!--Frame 3 content here-->
        </li>
    </ul>
</div>

CSS

各フレームごとに配置やアニメーションを設定します。

.info1, .info2, .info3{
    left: -150px;
    top: 10px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}

詳しい実装方法やオプションは、下記ページを参照ください。