さぁ!検索しよう!

jQueryプラグインの「Parallax.js」を用いて、滑らかなパララックスアニメーションを作成する方法です。

前回の記事ではスクロールによるパララックスアニメーションでしたが、今回はマウスカーソルの動きによるものです。

Parallax.jsでは下記のようなものを制作することができます。

Parallax.js

parallax.js

Haunted Hills

Haunted Hills

Parallax.jsの導入方法は下記の通りです。

導入方法

  1. こちらからjquery.parallax.min.jsのみをダウンロードします。
  2. </body>の直前に、下記を記述します。
  3.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.parallax.min.js"></script>
        <script type="text/javascript">
        $('.scene').parallax();
        </script>
        

続いて、主な使い方です。

使い方

  • HTMLはリストで定義します。ul要素にはオプションを定義します。オプションには主に以下のようなものがあります。
  • 名称 説明
    data-friction-x x方向の滑り具合を指定します。数値は0~1の間で指定可能で、数値が大きい程滑りにくくなります。
    data-friction-y y方向の滑り具合を指定します。数値は0~1の間で指定可能で、数値が大きい程滑りにくくなります。
    data-scalar-x x方向の要素が動ける範囲を指定します。数値は0~10の間で指定可能で、数値が大きい程移動範囲が大きくなります。
    data-scalar-y y方向の要素が動ける範囲を指定します。数値は0~10の間で指定可能で、数値が大きい程移動範囲が大きくなります。

    上記の他にも、様々なオプションがありますので、詳しくはこちらをご覧ください。

    これらのオプションは、下記のように記述します。

        <ul class="scene" data-friction-x="0.1" data-friction-y="0.1" data-scalar-x="10" data-scalar-y="10">
        
  • li要素には全て同じクラスを指定し、続けて奥行きの深さを指定します。奥行きの深さはdepthで示し、数値が大きいほど動く幅が大きくなります。また、li要素が下へ行くほど数値を大きくすることでパララックスを生み出します。
  •     <li class="layer" data-depth="0.6">
            <img class="cat" src="cat.png">
        </li>
        <li class="layer" data-depth="1.0">
            <img class="bat" src="bat.png">
        </li>
        <li class="layer" data-depth="1.5">
            <div class="typography">typography</div>
        </li>
        <li class="layer" data-depth="2.0">
            <img class="tree" src="tree.png">
        </li>
        <li class="layer" data-depth="2.5">
            <img class="castle" src="castle.png">
        </li>
        

最後に

こちらは私が制作したものです。Parallax.jsは、トップページのヘッダー等どこかの一部や、ワンページ完結型のサイトに適しているでしょう。

以上で、Parallax.jsを用いて各要素がカーソルについてくるように動くパララックスアニメーションを実装する方法の解説を終わります。