視差効果(パララックス)を簡単に導入できるJavaScript「skrollr」

昨今流行っている視差効果(パララックス)を導入してみたい人は多いのではないでしょうか。
Prinzhorn/skrollrを利用すれば比較的簡単に導入可能です。
(スクロールして下さい。)

sponsors

使用方法

Prinzhorn/skrollrからファイル一式をダウンロード。

<script type="text/javascript" src="skrollr.js"></script>
	<script type="text/javascript">
	skrollr.init();
	</script>
	<link href="skrollr.css" rel="stylesheet" type="text/css" />
		
(スクロールして下さい。)

使用方法2

あとはdivの中にdataで高さとエフェクトを指定していきます。
		
	<div data-0="" //高さ0px
		data-100="opacity:1;top:10%;transform:rotate(0deg);transform-origin:0 0;" //高さ100pxの時に表現
		data-500="opacity:0;top:-10%;transform:rotate(-90deg);"> //高さ500pxの時の表現
	</div>
		
サンプルがいろいろskrollr/examplesにありますので、エフェクトなどの参考にしてみて下さい。
背景も組み合わせると面白い表現ができると思います。


Javascriptサンプルページ一覧
skuare.net

sponsors