パララックス

パララックスにしよう!! skrollrの実装方法

みなさま、ごきげんよう。
2014-07-25 勉強会でskrollrの実装方法について、確認しました。

自分のサイトや作品をパララックスにしたい人必見!!

この勉強会では”skrollr”というJavaScriptライブラリを使用しました。パララックスサイトの理解が曖昧な人や、初めてパララックスに挑戦する人は、以下の手順でやってみましょう。

パララックスとは

視差のことです。画像など複数のレイヤーを違った速度でスクロールさせることによって、奥行きを感じさせる表現手法です。

skrollrについて

スクロール量に応じて要素を動かすことで簡単にパララックスを実装できるJSライブラリです。

skrollrの実装方法

skrollr.jsをダウンロード

githubからダウンロードしてください。

htmlのbodyにskrollrを実行させるコードを記述する

これをbodyのどこかにコピペでOKです。

htmlの要素に”data-“属性でスクロール量に応じた動きを指定する

“data-“属性の書き方には“absolute mode”と“relative mode”の2つがあります

absolute mode

ページがどれだけスクロールされたのかを基準にして、各要素の振る舞いを決める書き方。DEMOは、このページの右上に、position:fixedで表示しています。

  • 書式はdata-[offset]-[anchor]。
  • offsetは整数を指定する。マイナスの値も指定可能。初期値は 0
  • anchorには、start か、endのいずれかを指定できる。offsetの基準点になる。初期値は start
  • offsetとanchorのいずれかを省略しても良い場合がある。

例えばdivの背景色を100pxスクロールする間に赤くなるようにするには

このように書きます。

“data-x”のxのところにはスクロール量の値を整数で指定します、−も可です。
初期値は0で一番上のスクロールしていない状態です。

“data-x-start”または”data-x-end”という指定もできて、これらはそれぞれ意味が少し違ってきます。
“data-x-start”は”スクロール量xの時に指定した動きが始まる”という意味で、”data-x”と同じ動きです。
ですが、”data-x-end”のときのxは起点が一番下になって、”スクロールが終わるところまでの残りのスクロール量”という意味になります。
これは例えば、一番下までスクロールすると”TOPへ戻る”ボタンが出てくるといった動きの指定に使えます。

また、xの値を省略することができ、この場合は”data-start”はページのトップでスクロールしていない状態(data-0と同じ)、”data-end”はスクロールが終わったとき、となります。

relative mode

  • viewportと、要素との位置関係によって各要素の振る舞いを決める書き方。
  • 書式はdata-[offset]-(viewport-anchor)-[element-anchor]。
  • viewport-anchorは必須。他は省略できる。
  • offset には整数を指定する。マイナスの値も指定可能。初期値は 0
  • viewport-anchor (必須) と element-anchor (省略可) に指定できるのは top, center bottom のいずれか。
  • element-anchor が省略された場合は、viewport-anchor の値が使われる。この時の振る舞いは、background-positionのそれと同じ様な考え方になる。

例えば、divの上辺が画面の上下中央にきたら回転し始め、divの下辺が画面の上下中央にくるまでに1回転するには

このように書きます。この下にあるDEMOをrelative modeで指定しています。

divの上辺が画面の上下中央にきたら回転し始め、divの下辺が画面の上下中央にくるまでに1回転する

skrollrについての説明を先生がわかりやすく訳してくださいましたので、こちらを参考にしてください。
skrollrについて

パララックスじゃないじゃないか!

はい、このままでは、skrollrを実装しただけで、パララックスではありません。パララックスにする為のskrollrの指定については、次回の勉強会をお楽しみに。

skrollrの書き方のポイント&参考になったサイト

パララックスについてはこちらのサイトが参考になると思います。

「パララックス」をはじめとする「スクロールエフェクト」の魅力とは
もういい加減飽きてるかもしれないけどパララックスサイト集めてみた

skrollrについてはこちらのサイトが参考になると思います。

パララックス効果を簡単に実現するJSプラグイン skrollr の使い方
簡単!パララックスサイトの作り方
[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr

それではみなさま、ごきげんよう。

absolute modeのDEMO

0から500で左にはける
600で左から出て1000で止まり
1500から2000で右に消える
下から300で左から出て
最下部で右にはける
ページの下まで100pxまでは右に隠れ、最下部で中央にくる。

カテゴリー: 勉強会 | タグ: | 投稿日: | 投稿者:
ジェイ子

ジェイ子 について

WAVE立川校に2010年の3月〜8月に通っていました。取得コース名は『WEBプロフェッショナル&グラフィックコース、WEBディレクション講座』WAVE在籍は2012年11月まででした。2010年9月以降はWEBから遠ざかっていたのですが、真中さんやかおりんごさんや高橋先生のおかげで倶楽部りんごに参加できたので、また1から勉強し直しています。そしてWEBデザイナーを目指して頑張ろうと思っています。

パララックスにしよう!! skrollrの実装方法」への2件のフィードバック

  1. ピンバック: skrollr.jsで背景をパララックスしてみた | パソコン倶楽部りんご

  2. ピンバック: パララックスが簡単に実装出来る!skrollrの使い方 | Freyja's Ramblings

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.