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

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  3. gridscrolling.js
  4. SWAPMYLI

    JavaScript

    スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「…

    シンプルでよさそうだったのでメモしときます。スライドが切り替わるタイミ…

  5. stickyNavbar.js
  6. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

コメント

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

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

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP