[JS]マジシャンがトランプを広げるように複数のパネルを華麗なアニメーションで広げるスクリプト -Baraja

リスト要素で実装したアイテムをトランプのように華麗なアニメーションで広げるjQueryのプラグインを紹介します。

デモのキャプチャ

Baraja: A Plugin for Spreading Items in a Card-Like Fashion

Barajaのデモ

デモでは15種類の気持ちいいアニメーションが楽しめます。

デモのキャプチャ

デモページ:右に広がります

デモのキャプチャ

デモページ:左にも広がります

デモのキャプチャ

デモページ:更に広がります

デモのキャプチャ

デモページ:垂直方向にも広がります

デモのキャプチャ

デモページ:水平方向にも

デモのキャプチャ

デモページ:くるっと回転

デモのキャプチャ

デモページ:ぐるりと回転

デモのキャプチャ

デモページ:1枚ずつ重ねたり

デモのキャプチャ

デモページ:ダイナミックに重ねたりもできます

Barajaの使い方

外部ファイル

jquery.js」と当スクリプトを外部ファイルとして記述します。スタイルシートはhead内に配置します。

<link rel="stylesheet" type="text/css" href="css/baraja.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.baraja.js"></script>

HTML

各アイテムはリスト要素で、画像や見出し・テキストを自由に配置できます。

<ul id="baraja-el" class="baraja-container">
    <li>
        <img src="images/1.jpg" alt="image1"/>
        <h4>Coco Loko</h4>
        <p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p>
    </li>
    <li> <!-- ... --> </li>
    <li> <!-- ... --> </li>
    <li> <!-- ... --> </li>
    <!-- ... -->
</ul>

JavaScript

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

$( '#baraja-el' ).baraja();

スクリプトのオプションでは、アニメーション開始のトリガー、スピード、エフェクト、広がりの幅・方向などを設定できます。

$( '#some-button' ).on( 'click', function( event ) {
 
    baraja.fan( {
        speed : 500,
        easing : 'ease-out',
        range : 90,
        direction : 'right',
        origin : { x : 25, y : 100 },
        center : true,
        translation : 0
    } );
 
} );

top of page

©2017 coliss