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. Justified Gallery
  2. JavaScript

    画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」

    個人的にすごく便利で使う機会がありそなjQueryプラグインの紹介です…

  3. BIDEO.JS

    JavaScript

    背景動画をフルスクリーンで表示させるJSライブラリ「BIDEO.JS」

    BIDEO.JSは、webページの背景にフルスクリーンで動画を表示させ…

  4. JavaScript

    アニメーション付きの水平・垂直プログレスメーターを実装できる「jQMeter」

    jQMeterはアニメーションが付いた水平・垂直のプログレスメーターを…

  5. mgGlitch

    JavaScript

    グリッチ効果を付けれるjQueryプラグイン「mgGlitch」

    mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショ…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP