画像を徐々に読み込みながら、タイル状に並べていくjQueryプラグイン「stalactite」

画像を徐々に読み込みながら、タイル状に並べていくjQueryプラグイン「stalactite」サンプル Pinterestが流行ってからタイル状に配置するデザインが増えました。
新はてブのように目線がばらつくという指摘もありますが、画像だけを見せるのであれば有効な手段なのではないでしょうか。
今回紹介する「stalactite : A jQuery plugin」では、画像だけでなく、iframeなども徐々に読み込んでいくというエフェクトもかけてくれます。

使用方法 stalactite : A jQuery pluginからファイルをダウンロード。 下記のようにJavaScriptを記述します。
<script type="text/javascript" src="/test/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/test/js/jquery.stalactite.min.js"></script> <script type="text/javascript"> $(function () { $("#id名").stalactite({ duration: 350, //表示速度 easing: 'swing', //表示の動き fluid: true //ウィンドウサイズの変更でも適用するか }); }); </script> あとは上記id内に画像などを書けば完成です。
<div id="id名"> <p style="width:200px;height:100px;">テキスト</p> <img src="画像パス" /> <iframe width="200" height="100" src="http://www.youtube.com/embed/9Y6H-YjsE9Q" frameborder="0" allowfullscreen></iframe> <!-- 以下要素分 --> </div> 画像を徐々に読み込みながら、タイル状に並べていくjQueryプラグイン「stalactite」サンプル

sponsors

「画像を徐々に読み込みながら、タイル状に並べていくjQueryプラグイン「stalactite」」をシェアする

記事作成:
記事URL:

TOP > > > 画像を徐々に読み込みながら、タイル状に並べていくjQueryプラグイン「stalactite」