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

    JavaScript

    テキストに様々なエフェクトを与えながら切り替わっていくjQueryプラグイン「Textualizer…

    フェードやスライドといった様々なエフェクトをテキストに与えながら切り替…

  2. graphite

    JavaScript

    シンプルな棒グラフを生成できる「graphite」

    graphiteはシンプルな棒グラフを生成できるJavaScriptラ…

  3. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

  4. Skippr

    JavaScript

    軽くて速いスライドショーを実装できるjQueryプラグイン「Skippr」

    SkipprというjQueryプラグインを使えば、軽くて速いスライドシ…

コメント

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

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

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP