Tweet

Pocket

Web制作におけるパララックスとは、ページのスクロール動作によって画面内の要素を異なるスピードで動かすことで視差を生み出し、立体感・奥行きを演出する手法のことです。

この制作方法を勉強しようと思い参考書などの書籍を探してみたのですが、パララックス制作に関する書籍は一切発行されておらず、仕方なくGoogle先生に教わることにしました。

色々と調べてみると、パララックスの作り方は多数あるようで、一番分かりやすくて工数かけずに制作できる方法はJQueryを使用した方法だったので、私が調べた中で割と実装しやすそうな方法を記載しておきます。

jarallax.js

JQueryのライブラリ「jarallax.js」を使用します。
cssで要素のposition、初期位置、要素の重なり順序などを指定し、あとはanimations.jsなどのjsファイルを作成して、スクロールした際の要素の動きを以下のような形で記述するだけです。

【JavaScript】

init = function(){
      jarallax = new Jarallax();
      jarallax.setDefault('#second,#third,#fourth', {opacity:'0'});
      jarallax.addAnimation('#logo',[{progress: "0%", top:"220px"}, {progress: "30%", top: "110px"}]);

      jarallax.addAnimation('#second',[{progress: "15%", opacity:"0"}, {progress: "40%", opacity:"1"}]);
      jarallax.addAnimation('#second',[{progress: "40%", opacity:"1"}, {progress: "100%", opacity:"1"}]);
      jarallax.addAnimation('#second',[{progress: "15%", top:"280px"}, {progress: "40%", top:"240px"}]);
}

【参考ページ】

• 簡単パララックス入門。 jarallax.jsの使い方解説 | 株式会社LIG

skrollr

JQueryのライブラリ「skrollr」を使用します。
こちらはjsを読み込み、HTML5のカスタムデータ属性を利用します。
動かす要素にdata属性使って直接スタイルを記述して動きの設定を行います。

【HTML】

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">ASCII.jp</div>

【参考ページ】

• ASCII.jp：パララックスをサクッと作れるskrollr｜こうめの“これから使える”jQueryプラグイン
• 簡単！パララックスサイトの作り方 – エンジニアをリングする

スマホ対応のパララックス（ScrollTween.js）

スマホにも対応したパララックスを実装できます。JQueryのライブラリ「ScrollTween.js」を使用します。
こちらは上記2つの方法より若干複雑ですが、構造がなんとなく分かれば色々と細かな設定が出来そうで使えると思います。
使い方はライブラリのjsとは別ファイルのjsファイルを作成し、その中に動きの指定を記述していく形になります。
オプションなど参考サイトにかなり詳しく書いてありますので、こちらを参考すれば作成出来ると思います。

【参考ページ】

• スマホ対応！パララックスサイトの作り方

パララックスの制作方法は他にも多々ありそうなので、他にも良い方法を見つけましたらまた掲載したいと思います。