[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr

Post on:2012年5月7日

jQueryなどの他のスクリプトに依存せず、スタンドアローンでパララックスのエフェクトを実装できる超軽量（2.2KB）のスクリプトを紹介します。

デモのキャプチャ

skrollr -GitHub

[ad#ad-2]

skrollrのデモ

パララックスは複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を起こすもので、skrollrはスクロールの量に応じて、ページ上の各エレメントにさまざまなスタイルを定義することができます。
デモではその面白いパララックスのエフェクトが楽しめます。

デモは3つあり、まずはskrollrが楽しめるメインのデモから紹介します。

デモのキャプチャ

skrollrのデモ：メイン

メインのデモは、スクロール量に応じてページ上の各エレメントが移動したり、カラーが変化したりなどスタイルが変わります。
デモページ下のピンクのバーは、スクロールの量です。

デモのキャプチャ

skrollrのデモ：メイン

[ad#ad-2]

二つ目は円形のエレメントをイージングで回転させるデモです。

デモのキャプチャ

skrollrのデモ：円形

三つ目はウェブページにスパイスをちょっとだけ加えたデモです。

デモのキャプチャ

skrollrのデモ：ウェブページ

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>
    <!--&#91;if lt IE 9&#93;>
    <script type="text/javascript" src="plugins/skrollr.ie.js"></script>
    <!&#91;endif&#93;-->
    <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

top of page

©2024 coliss