見出し画像
Photo by golchiki

インタラクティブアートで遊ぼう〜パララックス編〜

honda

こんにちは、株式会社アジケでフロントエンドエンジニアをしている本田です。

今回の記事では、インタラクティブアートの中でも「パララックス（視差効果）」と呼ばれる手法を用いた遠近感のあるサイトの作り方をご紹介します。
HTML5/CSS3の知識があればライブラリを導入するだけで簡単に実装できるので、この記事を参考にぜひ作ってみてください！


作るものについて

「パララックス（視差効果）」では華やかな効果を実装できて、よりユーザの興味を惹きつけられるため、主にランディングページに使うと効果的だと思います。

今回紹介するものとは少し違う演出がされていますが、実際にパララックスが使われている例としては、Splatoon2の公式サイトなどがあります。

あと、何よりも実装していてわくわくするので、業務だけでなく趣味のプログラミングに使うのもおすすめです！


パララックスとは？

まずはこちらのサイトをご覧ください。

今回使用するライブラリの公式サイトです。
灯台や雲がゆれる、波が動くなどの演出、雰囲気作りもすごいんですが、マウスを上下左右に動かしたり、スマホの画面を傾けたりした時の演出に注目してみてください。画面全体がゆらゆらと動くと思います。

この時、手前の方の振れ幅は大きく、奥の方は小さく動いているのがわかるでしょうか？これがパララックスです。


身近な例を挙げます。高速道路で窓から遠くの景色を見ている時のことをイメージしてみてください。
近くの方ほど素早く、遠くの方ほどゆっくりと動いて見えると思います。

この現象と同じように、手前と奥で動く速度に差をつけることによって、立体感や奥行きを演出する効果のことを「パララックス（視差効果）」と呼びます。


作り方

デザインを決める

何はともあれ、まずは何を作るか決めましょう。

なんとなくイメージが湧いたら、photoshopやillustlator、clip studioなどのツールでデザインを描き起こしていきます！

この時、一つのレイヤーにまとめて描かずに、手前、中央、奥のように段階に分けて作ってください！
例えば、4段階に分けたいときは下の図のようにレイヤーを分けます。

パララックス1


デザインを出力

最後に、描いたイラストを出力したらデザインの段階は終了です。
先ほど分けたレイヤーごとに出力します。


コーディング

続いてコーディングに入ります！
まずは、先ほどのサイトからライブラリをクローンまたはダウンロードしてください。

Parallax.jsは動作にjqueryを必要とするので、外部ファイルとして先ほどのファイルの他にjqueryを読み込みます。

このライブラリでは、動かすレイヤー全体を包む親要素を必要とします。
そのため、親要素を1つ作り、その中に先ほど出力したイラストをレイヤー順に重ねていきましょう！
div要素なども使えますが、リストにすると構造が分かりやすいと思うので今回はリストで作ります。

Parallax.jsは動作にjqueryを必要とするので、外部ファイルとして先ほどのファイルの他にjqueryを読み込みます。

このライブラリでは、動かすレイヤー全体を包む親要素を必要とします。
そのため、親要素を1つ作り、その中に先ほど出力したイラストをレイヤー順に重ねていきましょう！
div要素なども使えますが、リストにすると構造が分かりやすいと思うので今回はリストで作ります。

<ul id="scene">
 <li class="layer" data-depth="0.00"><img src="layer3.png"></li>
 <li class="layer" data-depth="0.20"><img src="layer2.png"></li>
 <li class="layer" data-depth="0.40"><img src="layer1.png"></li>
</ul>

この時、data-depthはそのレイヤーの深度を表していて、大きくするほど振れ幅が大きくなります。リストの下の方にいくほど手前に来るレイヤーにして、かつdata-depthを大きくするように実装すると上手くいくことが多いです。

続いて、JavaScriptのコードを書きます。

$('.scene').parallax({
$(function(){
 var scene = document.getElementById('scene');

 var parallexInstance = new Parallax(scene, {
   /*オプションの記述*/
   frictionX: 0.3,
   originX: 0.5,
   originY: 0.5,
   hoverOnly: false
 });
 parallexInstance.friction(0.2, 0.2);
 });
});

JavaScriptファイルには、さまざまなオプションを記述することができます。

中にはスマートフォンやタブレット端末でのジャイロによる操作を有効にするものや、摩擦係数を設定できるものもあります。
詳しくは公式ドキュメントを読んでみてください！


ここまでで大まかには完成しました！あとはdata-depthやオプションをいじって、好みの揺れ方になるように調整するだけです。

Webブラウザで表示すると、こんな感じになります。
平面で構成されているいらすとやさんのイラストのみで作っても、立体感を表現できていると思います。


終わりに

いかがでしたでしょうか？
一見複雑な実装が必要そうに見えますが、ほとんどをHTMLとCSSのみで完成させることができました！

この記事を参考に、パララックスを用いていろいろな実装をしてみてください！







おいしいお菓子を買います