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

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

関連記事

  1. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  2. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

  3. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

  4. Slideme

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

  5. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

  6. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

コメント

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

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

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP