Blindify

JavaScript

画像に垂直・水平方向のブラインド効果を入れたスライドショーを実装できるjQueryプラグイン「Blindify」

BlindifyというjQueryプラグインを使えば、画像に垂直・水平方向のブラインド効果を入れたスライドショーを実装することができます。画像を普通に見せるだけじゃ物足りないといった時によさそうですね。以下は使い方です。

[ads_center]

Blindifyの使い方

Blindify

Blindify

使い方は、まずhead内にjQuery本体とプラグインファイルを読み込みます。

<link rel="stylesheet" href="blindify.css" media="all" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.blindify.js"></script>

続いて、画像をリスト化するためのHTMLを記述していきます。

<div id="blindify">
    <ul>
        <li><img src="image1.jpg" alt="" /></li>
        <li><img src="image2.jpg" alt="" /></li>
        <li><img src="image3.jpg" alt="" /></li>
        <!-- 中略 -->
    </ul>
</div>

あとはプラグインを初期化してあげるだけです。

<script type="text/javascript">
    $(document).ready(function(){
        $('#blindify').blindify();
    });
</script>

オプションも色々と用意されているので、気になる方は是非チェックしてみて下さい。

FeedlyのChrome拡張機能Feedlyに簡単にアクセスできるChrome拡張機能前のページ

Photoshopのブラシのサイズ(直径)と硬さを変更するショートカットキー次のページPhotoshopのブラシのサイズと硬さを変更するショートカットキー

最近の記事

  1. シーザーチキン 石窯カンパーニュ
  2. スキャルプ&ヘア リファイニング トリートメント オイル R
  3. ポーレックスの手動ミル
  4. クリスマスブロンドロースト
  5. トマトとニンニク
PAGE TOP