[JS]スライドを縦横斜めのダイナミックなスクロールで表示するスクリプト -Ascensor.js

divコンテンツをマトリックス状に配置し、縦横斜めのダイナミックなフルスクリーンスクロールで次々に表示するjQueryのプラグインを紹介します。

Ascensor

[ad#ad-2]

• Ascensorのデモ
• Ascensorの使い方

Ascensorのデモ

サイトはデモにもなっています。

デモページ

ページ中央の「Demo and how to use」をクリックします。
操作は、左上の「prev, next」、右下の「ナビゲーション」、キーボードの「矢印キー」です。

[ad#ad-2]

Ascensorを実際に使用しているサイトも紹介します。

WateRevive

Shanae Maris

Reverse Buro

Ascensorの使い方

外部ファイル

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

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script> 
<script src="js/jquery.ascensor.js" type="text/javascript"></script>
<script src="js/myscript.js" type="text/javascript"></script>

HTML

各スライドはdiv要素を使い、それらをdiv要素で内包します。

<div id="house">
        <div>
                <div id="ContentName">1枚目のスライド</div>
        </div>
        <div>  
                <div id="ContentName">2枚目のスライド<</div>
        </div>
        <div>
                <div id="ContentName">3枚目のスライド<</div>
        </div>  
        <div>
                <div id="ContentName">4枚目のスライド<</div>
        </div>
        <div>
                <div id="ContentName">5枚目のスライド<</div>
        </div>
</div>

CSS

スタイルシートでスクロールバーを隠します。

body{overflow: hidden;}

JavaScript

jQueryのセレクタでラッパーを指定し、スクリプトを実行します。

$('#house').ascensor();

マップの設計

各スライドを任意のサイズ・配置にする場合は、下記のようになります。

$('#content').ascensor({                                          
        ChocolateAscensor:true,
                //オリジナルのステージの有無
        AscensorMap: '4|3',
                //マップのサイズ
        ContentCoord:'1|1 & 2|2 & 1|2 & 3|4 & 1|3 & 3|1 & 2|3'
                //ステージの配置
});