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. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  2. jAnimate

    JavaScript

    フリップやバウンスなどのアニメーションを要素に実装できる「jAnimate」

    jAnimateはフリップやバウンスなどといったアニメーションを要素に…

  3. preload

    JavaScript

    プリロードやローディング画面を実装できるjQueryプラグイン「preload」

    preloadは、その名のとおり「プリロード」やローディング中の画面を…

  4. Effect Ideas for Card Stacks
  5. dndod

    JavaScript

    依存性のないシンプルで簡単なモーダルライブラリ「dndod」

    dndodはjQueryなどへの依存性のないシンプルで簡単なJavaS…

  6. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

最近の記事

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

アーカイブ

PAGE TOP