PIGNOSE-ParallaxSlider

JavaScript

パララックス効果を備えたスライダーを実装できる「PIGNOSE-ParallaxSlider」

PIGNOSE-ParallaxSliderは、パララックス効果を備えたかっこいいスライダーを実装することができるjQueryプラグインです。パララックス付きのレイヤリングされたスライダーを設置したい人は要チェックです。

PIGNOSE-ParallaxSlider

デモ

デモでは画面の横いっぱいに広がったスライダーが表示されていて、中央にある画像の中にレイヤリングされた小さい画像がもう1つ表示されています。大きい方の画像がスライドされると同時に、パララックス効果のついた小さい画像もスライドされます。

スライダーは自動でスライドしていきますが、小さい画像内から再生・停止することが可能です。そのほか、前後移動できる矢印やナビゲーションも用意されています。

また、実用的なオプションもいろいろあるのでカスタマイズしたい人にも最適です。主なオプションは、speed、interval、direction、diffTime、controlAnim、pagination、auto、isLocal、play、pause、next、prev、afterMoveです。

ちなみに、デフォルトのspeed値は1200、intervalは3000、directionはright、paginationはauto、autoはtrueに設定されています。

PIGNOSE-ParallaxSliderでは、IE 8+、Chrome、Firefox、Safari、Operaとほとんどのブラウザをサポートしているのも特徴です。ライセンスはMITとのこと。

PIGNOSE-ParallaxSlider

jquery.xtrクライアントサイドで変換してくれる「jquery.xtr」前のページ

スクロールで複数のコンテンツの見出しをスタックしていける「Sticky Multi Header Scroll」次のページSticky Multi Header Scroll

関連記事

  1. Text Effects

    JavaScript

    テキストがカシャカシャ切り替わって表示するjQueryプラグイン「Text Effects」

    Text EffectsというjQueryプラグインを使えば、テキスト…

  2. jquery.autoscroll-text-tape
  3. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  4. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

  5. universal-tilt.js

    JavaScript

    パララックスなど多彩なチルト効果を実装できる「universal-tilt.js」

    universal-tilt.jsはパララックスやスケールなど多彩なチ…

  6. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

最近の記事

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

アーカイブ

PAGE TOP