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

普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、AppleのiPhoneページに使用されているようなスライダーなどを簡単に、そしてセマンティックに実装できるjQueryのプラグインを紹介します。

サイトのキャプチャ

Sequence.js - The jQuery Slider Plugin with Infinite Style

Sequence.jsの特徴

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

Sequence.jsのデモ

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

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

デモのキャプチャ

Demo: Modern Slide In

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

デモのキャプチャ

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

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

top of page

©2017 coliss