[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor
Post on:2015年1月19日
sponsorsr
指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。
Parallaxorのデモ
デモはChrome, Firefox, Safariでご覧ください。
IEやスマフォではスタティックに表示されます。
デモは2種類あり、ヘッダの画像と見出しがそれぞれ異なるタイミングでスクロールします。
Parallaxorの使い方
Step 1: 外部ファイル
当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。
[html]
...
...
コンテンツ
...
[/html]
Step 2: HTML
パララックスを適用する要素をコンテナで内包します。
[html]
Parallaxor is awesome !
This was too simple
[/html]
Step 3: JavaScript
パララックスを適用する各要素の移動距離や方向を指定します。
[javascript]
[/javascript]
sponsors
