こんにちは、デザイナーのサリーです。
JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。
使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。
（注：スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。）
jarallax.jsとは？
パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。
公式ページはこちら：
http://www.jarallax.com/
HTML
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sally's Restaurant</title>
<link href="css/style.css" rel="stylesheet" media="all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jarallax.js"></script>
<script src="js/animations.js"></script>
</head>
<body onload="init()">
<div id="wrapper">
<div id="logo">
<h1><img src="images/logo.png" alt="Welcom to Sally's Restaurant" width="440" height="140"></h1>
</div>
<div id="first">
<p><img src="images/img01.jpg" width="520" height="380" alt="お皿"></div>
<div id="second">
<p><img src="images/img02.png" width="720" height="520" alt="MAIN DISH"></p>
</div>
<div id="third">
<p><img src="images/img03.png" width="720" height="520" alt="A LA CARUTE"></p>
</div>
<div id="fourth">
<p><img src="images/img04.png" width="720" height="520" alt="DESSERT"></p>
</div>
<div id="price01">
<p><img src="images/price01.png" width="180" height="109" alt="Pasta"></p>
</div>
<div id="price02">
<p><img src="images/price02.png" width="180" height="109" alt="Pincho"></p>
</div>
<div id="price03">
<p><img src="images/price03.png" width="180" height="109" alt="Hotcake"></p>
</div>
</div>
</body>
</html>bodyに「onload=”init()”」を付け加えてください。
JSは以下の3つを読み込んでいます。
- jquery.js
- jarallax.js
- animations.js
animations.jsでは、動きを設定しています。（後で解説します。）
CSS
@charset "UTF-8";
body {
margin:0;
padding:0;
background:#f3f2f7;
height:5000px; /*高さの数値を変えるとスクロール量を調整できる*/
}
#wrapper {
position:fixed; /*大枠はfixedに*/
width:100%;
height:100%;
}
#logo,
#first,
#second,
#third,
#fourth {
position:absolute; /*要素はabsoluteに*/
width:100%;
text-align:center;
}
#second,
#third,
#fourth {
opacity:0; /*初期値を設定*/
}
#logo {
z-index:5; /*重なり順を設定*/
top:220px; /*初期値を設定*/
}
#first {
z-index:1; /*重なり順を設定*/
top:340px;
}
#second {
z-index:2; /*重なり順を設定*/
}
#third {
z-index:3; /*重なり順を設定*/
}
#fourth {
z-index:4; /*重なり順を設定*/
}
#price01,#price02,#price03 {
position:absolute; /*要素はabsoluteに*/
width:100%;
top:700px;
opacity:0; /*初期値を設定*/
}
#price01 {
z-index:6; /*重なり順を設定*/
}
#price02 {
z-index:7; /*重なり順を設定*/
}
#price03 {
z-index:8; /*重なり順を設定*/
}
#price01 p,
#price03 p {
text-align:left;
width:1000px;
}
#price02 p {
text-align:right;
width:1000px;
}
h1,p {
margin:0 auto;
padding:0;
width:720px;
display:block;
}- 大枠（#wrapper）をposition:fixed;にします。
- bodyにheightを設定して、スクロール量を決めます。（後から調整可能なので、適当な数値でOK！）
- 各要素をposition:absolute;にします。
- 各要素の重なり順をz-indexで設定します。
JS
animations.jsのソースです。
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.addAnimation('#third',[{progress: "45%", opacity:"0"}, {progress: "70%", opacity:"1"}]);
jarallax.addAnimation('#third',[{progress: "70%", opacity:"1"}, {progress: "100%", opacity:"1"}]);
jarallax.addAnimation('#third',[{progress: "45%", top:"280px"}, {progress: "70%", top:"240px"}]);
jarallax.addAnimation('#fourth',[{progress: "75%", opacity:"0"}, {progress: "100%", opacity:"1"}]);
jarallax.addAnimation('#fourth',[{progress: "75%", top:"280px"}, {progress: "100%", top:"240px"}]);
jarallax.addAnimation('#price01',[{progress: "15%", top:"600px"}, {progress: "40%", top:"450px"}]);
jarallax.addAnimation('#price01',[{progress: "0%", opacity:"0"}, {progress: "15%", opacity:"0"}]);
jarallax.addAnimation('#price01',[{progress: "15%", opacity:"0"}, {progress: "30%", opacity:"1"}]);
jarallax.addAnimation('#price01',[{progress: "30%", opacity:"1"}, {progress: "40%", opacity:"1"}]);
jarallax.addAnimation('#price01',[{progress: "40%", opacity:"1"}, {progress: "55%", opacity:"0"}]);
jarallax.addAnimation('#price01',[{progress: "55%", opacity:"0"}, {progress: "100%", opacity:"0"}]);
jarallax.addAnimation('#price02',[{progress: "45%", top:"600px"}, {progress: "70%", top:"450px"}]);
jarallax.addAnimation('#price02',[{progress: "0%", opacity:"0"}, {progress: "45%", opacity:"0"}]);
jarallax.addAnimation('#price02',[{progress: "45%", opacity:"0"}, {progress: "60%", opacity:"1"}]);
jarallax.addAnimation('#price02',[{progress: "60%", opacity:"1"}, {progress: "70%", opacity:"1"}]);
jarallax.addAnimation('#price02',[{progress: "70%", opacity:"1"}, {progress: "85%", opacity:"0"}]);
jarallax.addAnimation('#price02',[{progress: "85%", opacity:"0"}, {progress: "100%", opacity:"0"}]);
jarallax.addAnimation('#price03',[{progress: "75%", top:"600px"}, {progress: "95%", top:"450px"}]);
jarallax.addAnimation('#price03',[{progress: "0%", opacity:"0"}, {progress: "75%", opacity:"0"}]);
jarallax.addAnimation('#price03',[{progress: "75%", opacity:"0"}, {progress: "90%", opacity:"1"}]);
jarallax.addAnimation('#price03',[{progress: "90%", opacity:"1"}, {progress: "100%", opacity:"1"}]);
}jarallax.addAnimation で動きを設定しています。
なんだか長くなってしまったので、4行目を取り出して解説しますね。
jarallax.addAnimation('#logo',[{progress: "0%", top:"220px"}, {progress: "30%", top: "110px"}]);「#logoを、スクロール量0%のときtop:220px;→スクロール量30%のときtop:110px; まで動かす」という指示を出しています。
「jarallax.setDefault」で各要素の初期値の設定ができますが、JSが読み込まれたあとで発動するため、一瞬チラつきます。
初期値はここで設定せずにCSSで設定することをおすすめします。7行目・11行目など、一見意味なさげが記述がありますが、0%〜◯◯%、◯◯〜100%のときは変化がなくても書いておかないと不安定な動きになることがありました。「opacity」を設定したときに不安定になることがあるようです。
まとめ
デモでは簡単な動きしか付けていませんが、アイデア次第で色々な動きを付けることができます。
以下2つのサイトはjarallax.jsを使用したパララックスのサイトなので、参考までに。
おすすめのパララックスのJSがあったら教えてください！（FacebookかTwitterかブクマコメントあたりで……。）
以下、公式ページのリンクです。
- jarallax 公式サイト
- 公式のデモ
- ダウンロードはこちら
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
