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. Scrolla

    JavaScript

    スクロール時にアニメーションするjQueryプラグイン「Scrolla」

    Scrollaは上下スクロールしたときにアニメーションするjQuery…

  2. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  3. PopCircle
  4. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  5. tingle.js

    JavaScript

    シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」

    tingle.jsは、シンプルなモーダルウィンドウを実装できるスクリプ…

  6. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

コメント

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

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

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me

アーカイブ

PAGE TOP