stacky

JavaScript

スライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」

stackyというjQueryプラグインを使えばコンテンツをスライドダウンして表示したりスライドアップして収納したりすることができます。CSS3のtransitionを使用しているみたいです。たくさんあるコンテンツを整理したい時に役立ちそうですね。使い方もシンプルなのが嬉しいです。

[ads_center]

stackyの使い方

実際のデモでは、以下のように右下の部分をクリックすると。

stacky

こんな感じで非表示になっているコンテンツがスライドダウンして表示されます。

stacky

使い方としては、まずjQuery本体とプラグインファイルを読み込みます。

<link href="stacky.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="stacky.js"></script>

続いてHTMLを記述していきます。

<div class="three">
    <div>
        <!-- コンテンツ -->
    </div>
    <div>
        <!-- コンテンツ -->
    </div>
    <!-- 中略 -->
</div>

あとはstackyを呼び出してあげます。

$(".three").stacky();

オプションもいくつかあるので詳しくは以下からチェックすることができます。

ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」前のページ

特定のテキストをアニメーションしながら入れ替えていくjQueryプラグイン「Text Rotator」次のページText Rotator

関連記事

  1. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

  2. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  3. ScrollTrigger

    JavaScript

    スクロールの位置をベースにしたアニメーション「ScrollTrigger」

    ScrollTriggerはユーザーがスクロールする位置をベースにした…

  4. no-image
  5. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  6. textwriteout

    JavaScript

    テキストの書き出し・削減ができるjQueryプラグイン「textwriteout」

    textwriteoutは指定したテキストを書き出したり削減したりでき…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP