パララックス用ライブラリ skrollr.js を使ってみた

有名パララックスサイト用ライブラリskrollr.jsを使ってみました。
IE7にも対応しており、(transformプロパティは未対応)実用的です。

今回作ってみたサンプルページ

skrollr.js の使い方

CSSを読み込む

<link href="src/skrollr.css" rel="stylesheet" type="text/css" />

JSを読み込む(下部)

<script type="text/javascript" src="dist/skrollr.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="dist/skrollr.ie.min.js"></script>
<![endif]-->
<script type="text/javascript">
skrollr.init();
</script>

スクロールの値ごとのスタイルを設定する

<div id="content1" data-0="top:0%;opacity:1;" data-3000="top:100%;opacity:0.3;" >
<!-- / .content1 --></div>

<div id="content2" data-3000="opacity:1;" data-6000="opacity:0;">
<!-- / .content2 --></div>

<div id="content3" data-6000="top:0%" data-9000="top:100%">
<!-- / .content3 --></div>

<div id="content4" data-6000="background-position:0px 0px;" data-12500="background-position:0px -500px;">
<!-- / #content4 .content4 --></div>

<p id="leftout" data-0="left:50%;" data-3000="left:-100%;">Left Out</p>

<div id="transform" data-1000="top:100%;transform:scale(0) rotate(0deg);opacity:1;" data-3000="top:50%;transform:scale(4) rotate(360deg);" data-6000="opacity:0;">
	<p>Transform</p>
<!-- / #transform --></div>

<div class="box" data-9000="top:10%;left:30%;" data-11000="top:-50%">
	<p>テキストテキストテキストテキストテキストテキスト	</p>
<!-- / .box --></div>

<div class="easing">
	<p data-6500="left:50%;top[cubic]:100%;" data-9000="top:0%;">cubic</p>
	<p data-6500="left:30%;bottom[quadratic]:100%;" data-9000="bottom:0%;">quadratic</p>
	<p data-6500="left:70%;bottom[swing]:100%;" data-9000="bottom:0%;">swing</p>
<!-- / .easing --></div>

<p class="end" data-10000="opacity:0;left:50%;top:50%;" data-11000="opacity:1">end</p>

data-6000=”XXXXX” この部分でスクロールした値によってスタイルを変化させています。

今回作ってみたサンプルページ