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. ArtDesignSlider

    JavaScript

    レスポンシブで豊富なエフェクトのイメージスライダー「ArtDesignSlider」

    ArtDesignSliderは豊富なエフェクトでレスポンシブにも対応…

  2. no-image
  3. FrameScrub
  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  5. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

  6. roundSlider

    JavaScript

    値の範囲を円形スライダーで表示できる「roundSlider」

    roundSliderは値の範囲を円形スライダーで表示できるjQuer…

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP