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. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

  2. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  3. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

  4. JavaScript

    フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLa…

    フォームを入力する際にあると便利なのがplaceholderです。しか…

  5. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  6. Scrolltab

    JavaScript

    スクロール移動させるタブを追加できるjQueryプラグイン「Scrolltab」

    ScrolltabというjQueryプラグインを使えばスクロール移動さ…

コメント

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

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

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP