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. no-image

    JavaScript

    いろんなズーム機能を実装できるjQueryプラグイン「xZoom」

    xZoomはいろんなズーム機能を実装することができるカスタマイズ性に優…

  2. Background Blur

    JavaScript

    画像をボカしてくれるクロスブラウザ対応の「Background Blur」

    Background Blurは画像をカッコよくボカしてくれるクロスブ…

  3. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  4. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

  5. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  6. Sliding Panels Template

コメント

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

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

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP