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など色々あります。

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

Cavendish.jsCSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「Cavendish.js」前のページ

DPPでカスタムしたホワイトバランスを登録する次のページDPPでカスタムしたホワイトバランスを登録

関連記事

  1. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  2. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  3. Brusher

    JavaScript

    インタラクティブな背景を実装できる「Brusher」

    Brusherはインタラクティブな背景を実装できる軽量なJavaScr…

  4. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

  5. MG Space

    JavaScript

    Google画像のようなアコーディオンプラグイン「MG Space」

    MG SpaceはGoogle画像のようなjQueryアコーディオンプ…

  6. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

コメント

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

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

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP