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

画像やパネルをシャッフルしてスライドさせるjQueryのプラグインを紹介します。

デモのキャプチャ

Grid Slide Plugin

Grid Slideのデモ

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

サイトのキャプチャ

デモページ:Demo 1

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

サイトのキャプチャ

互い違いにスライド中

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
ビューポートの幅

top of page

©2017 coliss