parallax-background.js

JavaScript

パララックス効果で視差の背景を演出してくれる「parallax-background.js」

parallax-background.jsは、単純な視差の背景をサイトへ演出してくれるjQueryプラグインです。サイトをスクロールすると、背景画像に美しく滑らかな視差を演出します。本プラグイン名にもあるように、パララックス効果をサイトへ構築するためのものになります。

パララックスとは、複数の視覚要素を異なるスピードで動かすことで視差を生み出し、立体感や奥行きを演出する手法のことです。スクロールなどのユーザーの動作に応じて動作します。一時期は非常に注目され、最近では様々なサイトで見かける手法です。しかし、この手法はバグの発生も少なくなく、思い通りの演出を生み出すには非常に多くの構想と導入への時間を要します。そこで、単純な視差を生み出すのに適した本プラグインをご紹介します。

それでは、parallax-background.jsについて詳しく見ていきましょう。

parallax-background.js

デモ

では、parallax-background.jsの導入からご紹介します。基本的な仕組は、<div>要素内にタグを作成し、CSS3 3D Transformsプロパティを使用します。

<script src=" https://code.jquery.com/jquery-3.2.1.min.js "></script>
<script src="/path/to/parallax-background.min.js"></script>
<script>
    (関数($){
        $( '.任意のクラス').parallaxBackground();
    })(jQuery);
</ script>

ここまでで、背景にサイドに動く視差効果が発生します。非常に簡単ですね。

また、オプションもいくつか追加できます。オプションは、JavaScriptのデータ属性を介して追加することができます。視差効果が実行されるスピードや、効果の方向を上下左右で指定することもできます。追加する際はいくつか注意事項がありますので、デモサイトまたはプラグインの配布サイトで確認してから追加してください。

parallax-background.js

関連記事

  1. Multi-Screen.js
  2. no-image
  3. jBox

    JavaScript

    ツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」

    jBoxはカスタマイズ性に優れたツールチップ、モーダルウィンドウ、通知…

  4. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  5. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  6. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP