JavaScript

画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグインのイメージギャラリーを実装できる「Heap Shot」です。実際に写真を手に持って見ているかのような、そんなアニメーションを付けることができます。使い方もシンプルでよさそうですね。

[ads_center]

使い方

Heap Shot

このように、写真が上から下へ移動しながら順番に表示されていきます。おもしろいアニメーションですね。

マークアップもとてもシンプルです。

<ul class="heapshot">
    <li><img src="img1.jpg" /></li>
    <li><img src="img2.jpg" /></li>
    <li><img src="img3.jpg" /></li>
   ・・・(中略)・・・
</ul>

Heap Shotの呼び出し。

jQuery(document).ready(function($) {
    $('.heapshot').heapshot();
});

オプションもいくつか用意されており、rotationやautostartなど色々あります。

実際のデモや詳しい詳細については以下から確認できます。

関連記事

  1. Picker

    JavaScript

    iOSのようなピッカーを実装できるJSライブラリ「Picker」

    Pickerは、iOSのUIのようなピッカーを実装することができるJS…

  2. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  3. no-image
  4. Tikslus Carousel
  5. diamonds.js
  6. DateTime Picker

    JavaScript

    レスポンシブでフラットデザインの「DateTime Picker」

    DateTime Pickerはレスポンシブ対応のフラットデザインによ…

コメント

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

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

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP