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

サイト構築 -JavaScript

Post on:2012年11月15日

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