さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

パララックス制作について

Pocket
LINEで送る

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"}]);
}

【参考ページ】

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>

【参考ページ】

スマホ対応のパララックス(ScrollTween.js)

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

【参考ページ】

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

カテゴリー:html, HP制作, JQuery

コメントを残す

コメント内容