• web制作

【パララックス】skrollr.jsを使って動かしてみる【視差】

大和田
このエントリーをはてなブックマークに追加

近くに見える物を早く、遠くの物を遅く移動させることで視差が生まれ立体感のあるサイトが作れるようになります。
手間の割にはサイトを見る側の反応が薄いランキングに入ってそうな手法ですが、作る側には結構好まれるのでいろいろ覚えておかなくてはなりません。
というわけで、スマホにも対応している「sklollr」を使ってみました。

「sklollr」

・ダウンロード
https://github.com/Prinzhorn/skrollr
・公式デモ
http://prinzhorn.github.io/skrollr/

準備

jQueryを使う為のいつもの準備

<!-- まずjQueryを引っ張って来て -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>



<!-- skrollrはbodyタグの終了直前に入れます -->
<script type="text/javascript" src="skrollr.min.js"></script>
    <script type="text/javascript">
    var s = skrollr.init();
    </script>
</body>

使い方

HTNLのカスタムデータ属性を利用して動かすらしいです。
よく意味がわからないので実際のサンプルコードを見ましょう。

<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>

上記は「data-0」の時に要素の背景色を青色、回転を0degと書いた後
「data-500」に近づくにつれて背景色を赤色、回転360deg(一回転)するように書かれています。
・公式デモ
http://prinzhorn.github.io/skrollr/examples/docu/2.html
data-の後に続く数字はスクロール量を示しています。
ページを作っている時にスクロール量を取得したい時は・・・

<head>
<script>
$(function(){
	$(window).scroll(function(){ //スクロールイベント
		var y = jQuery(this).scrollTop();
		$("#scroll").text("スクロール量:" + y); //追加
	});
});
</script>
</head>
<body>
<p id="scroll"></p>
</body>

こうだそうです。
・参考:http://2g.atsukitaira.com/javascript/jquery/899/

注意点

今既に作られたサイトに、追加で動きをつけようと、要素一つに「data-〜」をつけたとしてもPC上では動きますが、スマホでは表示がバグります。

スマホ用でしっかり見る為にはコンテンツ全てを「#skrollr-body」で囲まないといけません。
しかし、囲んだコンテンツの中にfixedを使用しているものがあると、これもおかしくなるので対象を「#skrollr-body」外にだして組み直さなければいけません。

ここらが非常にややこしいので、他の「skrollr」紹介サイトでも表示がおかしかったり、そもそもスマホでは切っていたりすることが多々ありました。

作った

というわけで実際に触ってみました。

http://teamsanta.info/sample/skrollr/

こちらは「skrollr」のダウンロードファイルの中に入っている「examples/fixed-positioning.css」を使用して、サンプル用に書きました。
cssによって「data-」をつけた要素が全てfixedになっているので、実はスクロールしているように見せかけて要素は全て最初の画面内に収まっています。

スクロール量に合わせて要素を出したり、引っ込めたり、ついでに背景をスクロールに合わせて上方向に移動させることで、まるでちゃんとしたスクロールができているよう!

http://mitana.teamsanta.info/

そしてこちらはfixedされている物と、スクロールしていく背景を合わせた物。
動きをつけている物は「#skrollr-body」の外にだして書いています。
だいぶ無茶な事をしているせいか背景のリンクが怪しかったりしましたがなんとかなりました。
・・・仙台にお住まいの方はICカードステッカーよろしくお願いします。

終わり

やれる事は多いですが覚える事も多いですね。
もう少し詰めてみよう

rss登録
このエントリーをはてなブックマークに追加