[JS]グリッドに沿ってさまざまな要素を互い違いにスライドさせるスクリプト -Grid Slide

サイト構築 -JavaScript

Post on:2012年6月6日

Grid Slideのデモ

デモは2つあります。
まずは、div要素をスライドさせるシンプルなデモから。

デモページ：Demo 1

キャプチャでは分かりにくいと思いますが、各パネルが互い違いのグリッドに沿ってスライドします。

互い違いにスライド中

[ad#ad-2]

2番目のデモは画像を使い、スライド時のアニメーションにバウンスを使っています。

デモページ：Demo 2

Grid Slideの使い方

外部ファイル

「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。
Demo 2のバウンドのエフェクトを使用する場合は「jQuery Easing Plugin」も記述します。

<link href="gridslide.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.gridslide.js" type="text/javascript"></script>

JavaScript

適用する要素をjQueryのセレクタで指定し、スクリプトを実行します。

<script type="text/javascript">
    $(function(){
        $('#gridslide').gridslide();
    });
</script>

スクリプトのオプション

オプションでは全体のサイズや表示するパネルの数、アニメーションの設定ができます。

shown: 表示させるパネルの数
direction: スライドの方向; シャッフルはrandom、top, right, bottom, leftが選択可
timeout: アニメーションの時間
speed: アニメーションのスピード
viewportClass: ビューポートのclass名
easing: アニメーションの種類
viewHeight: ビューポートの高さ
viewWidth: ビューポートの幅

[JS]グリッドに沿ってさまざまな要素を互い違いにスライドさせるスクリプト -Grid Slide

Grid Slideのデモ