Impulse Slider

JavaScript

3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」

Impulse SliderというjQueryプラグインを使えば3Dスライダーを簡単に実装することができます。立体的にスライドしていく動きが、見ていてとても面白いですね。デモではスライダー下部に矢印ナビや自動スライド停止ボタンもついています。サイトに立体感を取り入れたい場合に活用してみたいですね。

[ads_center]

Impulse Sliderの使い方

Impulse Slider

Impulse Slider

このように立体的にコンテンツをスライドさせることができます。色々なプリズム形状がサポートされているとのこと。画像やコンテンツの量に応じてどういったプリズム形状になるかが決定されます。

$(window).load(function() {
    $('#slider').impulseslider({
        height: 400,
        width: 300,
        depth: 300/1.09,
        perspective: 2800,
        pauseTime: 1500,
        transitionDuration: 1000,
        transitionEffect: "ease-in-out",
        autostart: true,
        rightSelector: ".right",
        leftSelector: ".left",
        pauseSelector: ".pause",
        directionRight: true,
        containerSelector: "#slider-container",
        spinnerSelector: "#slider",
        images: ["img/img1.jpg","img/img2.jpg","img/img3.jpg","img/img4.jpg","img/img5.jpg"],
        imageDivClasses: ["face"]
    });
});

オプションもたくさん用意されています。画像の場合は、上記のようにimagesというパラメーターに画像パスを入れていきます。

関連記事

  1. PopCircle
  2. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  3. JavaScript

    ショータイムが始まる前のスポットライトのようなjQueryプラグイン「Spotlight」

    Spotlightはショータイムが始まる前のスポットライトのようなアニ…

  4. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  5. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

コメント

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

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

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me

アーカイブ

PAGE TOP