no-image

JavaScript

さまざまなデバイスに対応したパララックスを実装できる「PARALLAX」

PARALLAXは、さまざまなデバイスに対応したシンプルなパララックスを実装することができるjQueryプラグインです。圧縮版で2KBほどと、とても軽量なところがうれしいですね。レスポンシブモードも備えています。

PARALLAX

PARALLAX

デモページでは画面をスクロールすることでパララックスによる視差効果を見ることができます。シンプルながらも、やはりパララックスということで、その動きに注目してしまいますね。

PARALLAXの開発・テストでは、jQuery 3.2.1が使われているとのこと。

また、オプションもいくつか用意されており、parallaxEmphasis、reverseParallax、responsiveといった項目のセッティングが可能です。デフォルト値は、parallaxEmphasisが50、reverseParallaxがfalse、responsiveがfalseです。

ちなみに、responsiveを有効にすることで、レスポンシブモードの設定ができるようになります。好きなブレイクポイントを設定し、各ブレイクポイントに対してparallaxEmphasisの値を設定するといったことが可能です。

シンプルながらも、カスタマイズ性に優れたパララックスを実装したいという人にはうれしい仕様になるはず。

というわけで、さまざまなデバイスに対応できる軽量のパララックスを取り入れたい人は、ぜひ「PARALLAX」を活用されてみてはいかがでしょうか?

関連記事

  1. iziToast

    JavaScript

    エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

    iziToastは、エレガントでレスポンシブに対応した軽量のトーストを…

  2. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  3. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  4. JavaScript

    テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateTex…

    テキストに滑らかに動くかっこいいアニメーションをつけることができるjQ…

  5. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  6. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP