さぁ!検索しよう!

jQueryプラグイン「Skrollr」を利用してパララックススクロールアニメーションを制作する方法を解説します。

Skrollrはスクロールアニメーションを実現するために開発されたjQueryプラグインであり、主にサイトにパララックス効果を取り入れる際に用いられています。

前述にスクロールアニメーションやパララックス効果と難しい言葉が出てきましたが、スクロールアニメーションとはスクロール操作によってページ上の要素が様々な形でアニメーションするような手法です。
パララックス効果とは異なる階層にある要素をそれぞれ異なるスピードで動かすことで視差を生み出し、サイトを立体的に魅せる効果をいい、一般的にこのようなサイトはパララックスサイトと呼ばれています。

※プラグイン無しでパララックス効果を導入する方法はこちらの記事をご覧ください。

パララックスサイトは海外のサイトで多く見られ、それらはコンセプトや伝えたいことをストーリー仕立てにして表現されています。このような表現はこれまでのサイトと比べ、閲覧者を惹きつけたり、製品を紹介するページに取り入れるのであれば閲覧者の購買意欲を高めるとされています。

下記は私が個人的に魅力を感じた海外のパララックスサイトです。

Mario Kart Wii Experience

イメージ084_mini

Anthelios SPF Sunscreen

イメージ081_mini

Every Last Drop

イメージ083_mini

Make Your Money Matter

イメージ082_mini

Skrollrの使い方

始めに、Skrollrを導入する手順を解説していきます。

導入手順

  1. こちらからskrollr.min.jsを、こちらからfixed-positioning.cssを右クリックでリンク先を保存します。
  2. HTMLのhead内に、先ほど保存したfixed-positioning.cssを読み込みます。またこのとき、独自のスタイルシートを読み込みます。
        <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/fixed-positioning.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        </head>
        
  3. HTMLの</body>の直前に、jQuery本体と先ほど保存したskrollr.min.jsとskrollrをIEでも動作させるためのファイルを読み込みます。
        <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/skrollr.min.js"></script>
        <!--[if lt IE 9]>
        <script type="text/javascript" src="js/skrollr.ie.min.js"></script>
        <![endif]-->
        </body>
        
  4. 3.の記述に続けて、その下にskrollrを実行させるためのスクリプトを読み込みます。
  5.     <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/skrollr.min.js"></script>
        <!--[if lt IE 9]>
        <script type="text/javascript" src="js/skrollr.ie.min.js"></script>
        <![endif]-->
        <script type="text/javascript">
         var s = skrollr.init(smoothScrolling=true);
        </script>
        </body>
        

これでSkrollrの導入が完了しました。次に要素を配置・移動させる方法を説明します。

要素の配置・移動

これらの方法は、いずれもHTML5のdata-で始まる独自データ属性というものを利用し、CSSプロパティとその値を操作することで実現させます。

独自データ属性とは要素に対してclass属性、id属性、alt属性の他に、特に意味合いのない要素に独自に属性を定義することができるものであり、HTML5から使用が可能となりました。

skrollrでの独自データ属性は下記のように動作の開始と終了をdata-*=""の形で記述し、*にスクロール値を入れ、""にCSSプロパティとその値を記述します。

<div data-0="top:30%;left:100%;" data-1000="left:-100%;"></div>

上記ではスクロール値が0px、つまりスクロールしていない状態では上から30%、左から100%の位置に要素が配置され、スクロール値が1000pxになると左から-100%の位置に移動します。アニメーションの仕方でいえば、始めは画面の右端に隠れていた要素が1000pxスクロールしている間に左端へ進み、アニメーションが終わったときには要素は画面から外れます。

※top,left,bottom,rightプロパティの値は全てpxか全て%かのどちらかに統一します。

このように、skrollrでは動作の開始と終了でスクロール値を定義し、そのスクロール値の間でCSSプロパティとその値によってアニメーションを実現させています。

次に、要素の移動速度を決める方法を説明します。

要素の移動速度

要素の移動速度を決める方法は画像要素と背景画像で異なります。画像要素で速度を指定する場合は、開始と終了のスクロール値の差で決めます。このとき、差が小さいほど移動速度は高くなります。下記の例では、element1の差は7000pxでelement2の差は30000pxなので、element1の方が移動速度が速くなります。

<!--12000-5000=7000-->
<img class="element1" data-5000="left:100%;top:24%;" data-12000="left:-100%;" src="img/element1.png">
<!--30000-0=30000-->
<img class="element2" data-0="left:60%;top:30%;" data-30000="left:-100%;" src="img/element2.png">

背景画像の移動速度を指定する場合は、background-positionプロパティとその値の差で決めます。※背景画像の指定はデフォルトのスタイルシートで予め記述します。このとき、差が大きいほど移動速度は高くなります。下記の例では、element1の差は50%でelement2の差は60%なので、element2の方が移動速度が速くなります。※下記を見て分かる通り、背景画像の移動速度を指定する場合は、要素自体(下記ではdiv要素)が動かないように固定させて背景画像のみを移動させるように開始と終了のスクロール値を一定にする必要があります。

<!--100%-50%=50%-->
<div class="element1" data-1000="background-position-x:100%;" data-40000="background-position-x:50%;"></div>
<!--100%-40%=60%-->
<div class="element2" data-1000="background-position-x:100%;" data-40000="background-position-x:40%;"></div>

このようにして要素の移動速度を指定していきます。それではいよいよパララックス効果を表現する方法を説明します。
パララックス効果はページ上の各要素を複数の階層で配置し、その階層によって異なる速さを与えて要素同士の動作のタイミングをずらすことで表現が可能となります。

パララックス効果の表現

始めに画像等の要素で表現する方法を説明します。

画像等の要素

<img class="element1" data-18000="display:block;z-index:3;left:110%;top:48%;" data-37000="left:-110%;" data-37100="display:none;" src="img/b-benchs-s.png">
<img class="element2" data-18500="display:block;z-index:9;top:65%;left:130%;" data-35000="left:-115%;" data-35100="display:none;" src="img/xtree3.png">
<img class="element3" data-19000="display:block;z-index:10;top:80%;left:120%;" data-33000="left:-120%;" data-33100="display:none;" src="img/lamp-l.png">

パララックス効果で最も重要な点は各要素の移動速度と階層の関係です。

上記の全ての要素に指定しているz-indexプロパティは要素の階層を指定する際に用いますが、positionプロパティが指定されていなければ使用することができません。しかし、そのような心配はなく、先ほどのskrollrを導入する際にHTMLに読み込んだfixed-positioning.cssに定義した全要素にposition:fixed;が適用されるクラスが自動で付与されるような記述がされているため、positionプロパティを指定する必要はありません。

パララックス効果を表現するにはこのz-indexプロパティの値を移動速度が高い要素ほど大きくします。つまり、階層が上になるほど要素の移動速度(開始と終了のスクロール値の差)を高く設定します。

これによってパララックスが生まれるのです。※隣り合う各要素同士の速度の数値は自由ですが、始めのうちは下記のように規則性を持たせたほうが、後で確認するときに混乱せずに済みます。

<!-- 6000 -->
<img data-2000=""; data-8000="";>
<!-- 4000 -->
<img data-3000=""; data-7000="";>
<!-- 2000 -->
<img data-4000=""; data-6000="";>

次に要素に対して動作の開始にleft:-100%;、終了にleft:100%;等を指定し画面から隠れるようなアニメーションをさせる場合(上記でいえばelement1の開始がleft:110%;で終了がleft:-110%;のような場合)は、動作の開始にdisplay:block;を、次の動作の開始(上記でいえばelement1data-37100内等)にdisplay:none;を指定しましょう。なぜなら、パララックスアニメーションは次々と後続に定義してある要素が動作していくため、アニメーションが終わった要素にdisplay:none;を指定しないと各要素が滞ってしまうからです。

続いて背景画像でパララックス効果を表現する方法を説明します。背景画像も先ほどの画像等の要素と同じ原理で階層が上になるほど速度を上げます。

背景画像

<div class="element1" data-1000="z-index:7;background-position-y:100%;" data-50000="background-position-y:-1500%;"></div>
<div class="element2" data-1000="z-index:5;background-position-y:100%;" data-50000="background-position-y:-1000%;"></div>
<div class="element3" data-1000="z-index:3;background-position-y:100%;" data-50000="background-position-y:-500%;"></div>
<div class="element4" data-1000="z-index:1;background-position-y:100%;" data-50000="background-position-y:0%;"></div>

リキッドレイアウトにする場合

画面サイズに応じて全体の比率を保ちたい場合は、下記のようにデフォルトのスタイルシートに、各要素に対しては高さのみをパーセントで指定します。

.element {
    height:24%;
    width:auto;
}

背景画像の場合は下記のように高さをパーセントで指定に加え、background-size:contain;を指定します。

.element2 {
    background:url(../img/ele2.png) no-repeat;
    background-size:contain;
    height:8%;
    width:100%;
}

skrollrの動作デモ

skrollrを使って作成したデモはこちらです。

以上です。