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

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  2. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  3. Choreographer-js

    JavaScript

    多彩なCSSアニメーションを実現できる「Choreographer-js」

    Choreographer-jsは、多彩なCSSアニメーションを実現さ…

  4. marginotes

    JavaScript

    テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

    marginotesは、クールなマージンノートを作成するjQueryプ…

  5. Macy.js

    JavaScript

    軽量なグリッドレイアウトを実装できるJSライブラリ「Macy.js」

    Macy.jsは軽量なグリッドレイアウトを実装することができる便利なJ…

  6. no-image

    JavaScript

    さまざまなデバイスに対応したパララックスを実装できる「PARALLAX」

    PARALLAXは、さまざまなデバイスに対応したシンプルなパララックス…

コメント

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

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

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP