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というパラメーターに画像パスを入れていきます。

マウスオーバーで左右に画像をスクロールさせるプラグイン「jQuery Smooth Div Scroll」前のページ

jQueryプラグインで印象的なエフェクトで魅せるモーダルウィンドウ「Block Slide」次のページBlock Slide

関連記事

  1. Reframe.js

    JavaScript

    特定の要素をレスポンシブ化してくれる「Reframe.js」

    Reframe.jsはレスポンシブに対応していない特定の要素をレスポン…

  2. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  3. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

  4. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

  5. Simple button radios

    JavaScript

    シンプルで高性能なラジオボタンを実装できる「Simple button radios」

    Simple button radiosはシンプルで高性能なラジオボタ…

  6. Tikslus Carousel

コメント

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

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

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP