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. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

  2. jQuery Notebook
  3. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

  4. Shine

    JavaScript

    ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

    ShineというJavaScriptライブラリが素敵だったのでメモがて…

  5. no-image
  6. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

最近の記事

  1. KPS-88
  2. Happy Plugs AIR1
  3. cheero Stream 10000mAh
  4. BOSE HOME SPEAKER 300
  5. RP-PC112

アーカイブ

PAGE TOP