Pogo Slider

JavaScript

豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」

Pogo Sliderは豊富なスライドアニメーションが揃っているjQueryプラグインです。スライドダウン、スライドアップ、スピン、3Dフリップ、回転などスライダーに関するたくさんの種類のアニメーションが用意されています。

Pogo Slider

デモ

デモではスライド、ブロック、スプリット、zip、expand、fold、フェードなど数多くのスライドトランジション動作を確認することができます。他にもスライドダウン、スライドアップなどのエレメントトランジションもチェックできます。

オプションで設定できる項目もかなりあるので、カスタマイズしたスライダーを実装したい方にはピッタリですね。

自動再生やレスポンシブのオン/オフなどを指定することができます。

使い方はこんな感じでマークアップしていきます。

<div class="pogoSlider">
    <div class="pogoSlider-slide" data-transition="slideOverLeft" data-duration="1000"  style="background-image:url(img1.jpg);">
        <h2 class="pogoSlider-slide-element" data-in="slideDown" data-out="slideUp" data-duration="750" data-delay="500">
        ここにコンテンツ
        </h2>
    </div>
<div class="pogoSlider-slide " data-transition="fold" data-duration="1000"  style="background-image:url(img2.jpg);"></div>
</div>

以下はPogo Sliderのセッティングです。

$(document).ready(function () {
    var mySlider = $('.my-slider').pogoSlider().data('plugin_pogoSlider');
        mySlider.pause();
        mySlider.resume();
        mySlider.nextSlide();
        mySlider.prevSlide();
        mySlider.toSlide(2);
        mySlider.destroy();
});

Pogo Slider

PreViewTube.jsYouTubeのサムネイル画像をアニメーション表示してくれる「PreViewTube.js」前のページ

Photoshopのワークスペース(サイドバー、パネル)を初期化する設定方法次のページ

関連記事

  1. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

  2. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  3. jsPanel3

    JavaScript

    多機能なフローティングパネルを実装できるjQueryプラグイン「jsPanel3」

    jsPanel3は、高度で多機能なフローティングパネル(ウィンドウ)を…

  4. pull-to-reload

    JavaScript

    下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」

    pull-to-reloadは、Webページ内で下へ引くだけでページを…

  5. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  6. zoomwall.js

    JavaScript

    高さを揃えたグリッドレイアウトのLightbox系イメージギャラリー「zoomwall.js」

    zoomwall.jsは高さを揃えたグリッドレイアウトを実装することが…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP