東京のWeb制作会社LIGLIGならできるおもしろいこと。フロントエンドシェアこんにちは、デザイナーのサリーです。JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。(注:スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。)jarallax.jsとは?パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。公式ページはこちら:http://www.jarallax.com/デモ簡単なデモを用意しました。こちらを元に解説していきます。alt="Hotcake"></p></div></div></body></html>bodyに「onload=”init()”」を付け加えてください。JSは以下の3つを読み込んでいます。jquery.jsjarallax.jsanimations.jsanimations.jsでは、動きを設定しています。auto;padding:0;width:720px;display:block;}大枠(#wrapper)をposition:fixed;にします。bodyにheightを設定して、スクロール量を決めます。(後から調整可能なので、適当な数値でOK!)各要素をposition:absolute;にします。各要素の重なり順をz-indexで設定します。JSanimations.jsのソースです。動きを設定しています。なんだか長くなってしまったので、4行目を取り出して解説しますね。動かす」という指示を出しています。「jarallax.setDefault」で各要素の初期値の設定ができますが、JSが読み込まれたあとで発動するため、一瞬チラつきます。初期値はここで設定せずにCSSで設定することをおすすめします。7行目・11行目など、一見意味なさげが記述がありますが、0%〜◯◯%、◯◯〜100%のときは変化がなくても書いておかないと不安定な動きになることがありました。「opacity」を設定したときに不安定になることがあるようです。まとめデモでは簡単な動きしか付けていませんが、アイデア次第で色々な動きを付けることができます。以下2つのサイトはjarallax.jsを使用したパララックスのサイトなので、参考までに。http://www.2gis.ru/dr/http://juanadevega.org/programaempresas/おすすめのパララックスのJSがあったら教えてください!(FacebookかTwitterかブクマコメントあたりで......。)以下、公式ページのリンクです。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。