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. PIGNOSE Calendar

    JavaScript

    美しくてシンプルに使えるデートピッカー実装「PIGNOSE Calendar」

    PIGNOSE Calendarは、美しくてシンプルな操作性によるデー…

  2. jfMagnify
  3. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  4. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

  5. no-image
  6. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP