bl6.jp

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

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

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

parallax-background.js

以下のページからparallax-background.jsのデモをチェックできます。

デモ

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

まず、プラグイン配布サイトで、ファイルをダウンロードしたらドキュメントに下記のように読み込ませます。jQueryは最新のものを読み込みましょう。2017年4月現在の最新はVer.3.2.1です。

<script src=" https://code.jquery.com/jquery-3.2.1.min.js "></script>
<script src="/path/to/parallax-background.min.js"></script>

次に、要素に視差効果を簡単に追加するには、<script>タグ間に次の行を追加します。

<script>
    （関数（$）{
        $（ '.任意のクラス'）.parallaxBackground（）;
    }）（jQuery）;
</ script>

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

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

詳細とダウンロードは以下からどうぞ。

parallax-background.js