[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr
Post on:2012年5月7日
sponsors
jQueryなどの他のスクリプトに依存せず、スタンドアローンでパララックスのエフェクトを実装できる超軽量（2.2KB）のスクリプトを紹介します。
[ad#ad-2]
skrollrのデモ
パララックスは複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を起こすもので、skrollrはスクロールの量に応じて、ページ上の各エレメントにさまざまなスタイルを定義することができます。
デモではその面白いパララックスのエフェクトが楽しめます。
デモは3つあり、まずはskrollrが楽しめるメインのデモから紹介します。
メインのデモは、スクロール量に応じてページ上の各エレメントが移動したり、カラーが変化したりなどスタイルが変わります。
デモページ下のピンクのバーは、スクロールの量です。
[ad#ad-2]
二つ目は円形のエレメントをイージングで回転させるデモです。
三つ目はウェブページにスパイスをちょっとだけ加えたデモです。
skrollrの使い方
skrollrはHTML5+CSS3で実装します。
基本書式
skrollrを使用する際の基本書式は下記のようになります。
「skrollr.css」はskrollrを使用する際のCSSの基本セットが記述されています。
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
<link href="skrollr.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="skrollr.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="plugins/skrollr.ie.js"></script>
<![endif]-->
<script type="text/javascript">
skrollr.init();
</script>
</body>
</html>
アニメーションの設定
アニメーションの設定はHTML5のdata属性を使用し、各エレメントに指定します。
「data-0」の「0」はキーフレームポジションで、最上部からスクロールで移動したピクセル数です。1000pxのスクロール時は「data-1000」となり、下記は0px時はpaddingが0pxで、1000pxスクロールするとpaddingが300pxになります。
<div data-0="padding:0px;" data-1000="padding:300px;">WOOOT</div>
キーフレームは複数使用することも可能で、下記のように記述します。
<div data-100="left:0%;" data-200="top:0%;" data-300="left:50%;" data-400="top:50%;"></div>
sponsors
