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. jquery.xtr

    JavaScript

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

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  2. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

  3. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

  4. Animsition
  5. Playful Little Tooltip Ideas
  6. JavaScript

    シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQu…

    jQueryスライダーのネタが多いですが、今日もまたスライダーのプラグ…

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP