• かちびと.net

    要素を遅延表示させながらレンガ風に整列させるシンプルで軽量なjQueryプラグイン・stalactiteのご紹介です。Masonryと同じようなスクリプトになりますね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

要素を遅延表示させながらレンガ風に整列させるシンプルで軽量なjQueryプラグイン・stalactite

スポンサーリンク

jQuery Masonryのように、要素をレンガ
のように時系列を崩さず配列させるだけ
でなく、遅延表示させるjQueryプラグイ
ン・stalactiteです。たまに見かける
エフェクトなんじゃないでしょうか。
スクリプトも軽量で使い勝手も良さそう
です。

遅延表示はちょっと面白いですね。スクリプトも軽量なのでポートフォリオかギャラリーで使ってみたいですね。Tumblrでも試したい。

stalactite


Masonryと同じタイプのスクリプトです。こちらは軽量でシンプルなのと、要素を遅延表示させるエフェクトが付いています。テキストや動画コンテンツなども対応していますよ。

サンプル作りました。以下に進んでClick me!をクリックしてください。分かりやすいように少し遅延速度を遅めにしてあります。

Sample

デモの写真はmark sebastian氏のものです。徐々に表示されたのが確認出来ましたでしょうか。

アニメーションスピードとかEasingのメソッドはjsファイルを開けて設定値を変更します。

$("#container").stalactite({
duration: 350,                        // アニメーションスピード
easing: 'swing',                      // Easingメソッド
cssPrefix: '.stalactite',             // class名
cssPrep: true,                        // 子要素のcssの変更の有無
fluid: true,                          // ウィンドウサイズでfluidさせるかどうか
loader: '<img />',                    // ローディング画像のパス
styles: {}                            // スタイル。位置とか
complete: function(v) { return v; }  // コールバック関数
});

ライセンスはApacheライセンスです。若干のバグもあるっぽいですけど軽量でなかなかいい感じという印象でした。以下よりどうぞ。

stalactite

URL :
TRB :

Comments & Trackbacks (6)

  1. anonymous

    lazyload plugin for jqueryと同じく、画像表示前にダウンロードは完了しますね。

    • シロ

      こんにちは。

      はい、仰るとおり遅延表示させるだけです:)

  2. けい

    画像をライトボックスみたいに表示させることはできないのでしょうか?

    • シロ

      こんにちは :)

      Lightbox系のライブラリを併用すれば可能ですよー。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services