[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor

サイト構築 -JavaScript

Post on:2015年1月19日

sponsorsr

指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。

Parallaxor -GitHub

Parallaxorのデモ
Parallaxorの使い方

Parallaxorのデモ

デモはChrome, Firefox, Safariでご覧ください。
IEやスマフォではスタティックに表示されます。

demo: first

デモは2種類あり、ヘッダの画像と見出しがそれぞれ異なるタイミングでスクロールします。

demo: second

Parallaxorの使い方

Step 1: 外部ファイル

当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。

<head>
  ...
  <link href="parallaxor.min.css" rel="stylesheet">
</head>
<body>
  ...
  コンテンツ
  ...
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="parallaxor.min.js"></script>
</body>

Step 2: HTML

パララックスを適用する要素をコンテナで内包します。

<div id="mycontainer">
  <h1>Parallaxor is awesome !</h1>
  <h2>This was too simple</h2>
  <img src="picture.jpg">
</div>

Step 3: JavaScript

パララックスを適用する各要素の移動距離や方向を指定します。

<script>
$('#mycontainer').parallaxor({
    top     : true,
    layers  : {
        'h1, h2'  : {
            distance    : '200px',
            direction   : 'right'
        },
        'img' : {
            distance    : '100%',
            direction   : 'down'
        }
    }
});
</script>