PopCircle

JavaScript

クリック時に周りに画像が表示されるイメージギャラリーを実装できるjQueryプラグイン「PopCircle」

PopCircleというjQueryプラグインを使えば、要素をクリックした時に周りに画像を表示させることができます。見た感じとっても面白いイメージギャラリーですね。ちょっと変わった見せ方をしたい時なんかによさそうです。

[ads_center]

PopCircleの使い方

実際のデモでは、このように、クリックすると周りに画像が「ポンッ」と表示されます。

PopCircle

PopCircle

$('.trigger').click(function(e){
    e.preventDefault();
    $.popcircle('#pops',
      {
        spacing:'10px',
        type:'full', // full, half, quad
        offset:1.95, // 0, 1, 2, 3, 4, 5, 6, 7 or 5.1
        ease:'easeOutElastic',
        time:'slow' // slow, fast, 1000
      }
    );
});

オプションでtypeをhalfにすると半円側だけに画像を表示したりするといったこともできます。

WordPressのログイン時のツールバーWordPressでアイキャッチ画像のサイズによって出力を振り分ける条件分岐のやり方前のページ

Photoshopで写真画像のExif情報を削除するやり方次のページ

関連記事

  1. Uglipop.js

    JavaScript

    軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」

    Uglipop.jsは軽量でミニマル、カスタマイズ性にも優れたモーダル…

  2. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  3. preload

    JavaScript

    プリロードやローディング画面を実装できるjQueryプラグイン「preload」

    preloadは、その名のとおり「プリロード」やローディング中の画面を…

  4. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  5. slimMenu
  6. Glide.js

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP