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

    サラッとスライスで切り替わるスライダー実装「Slice Slider」

    Slice Sliderはサラッとスライスでシンプルに切り替わるスライ…

  2. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  3. stickUp2

    JavaScript

    スクロールしてもついてくるスティッキー実装「stickUp2」

    stickUp2はスクロールしてもついてくるシンプルなスティッキーを実…

  4. Before and after slider
  5. FREVR

    JavaScript

    シンプルな無限スクロールを実装できるjQueryプラグイン「FREVR」

    FREVRはシンプルで軽量な無限スクロールの機能を実装することができる…

  6. Quttons

    JavaScript

    ボタンの形状やカラーが変化するjQueryプラグイン「Quttons」

    Quttonsはボタンをクリックすると形状やカラーが変化して新しいコン…

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP