[JS]使い方は簡単！要素や背景をスクロールに合わせてアニメーションさせるスクリプト -Swift Parallax
sponsors
スクロールした際にコンテンツと背景を異なるタイミングで移動させたり、スクロールすると各要素をさまざまなアニメーションで表示させたりなど、スクロールに合わせて要素や背景をアニメーションさせるjQueryのプラグインを紹介します。
Swift Parallaxのデモ
ページ自体がスクリプトのデモになっています。
スクロールすると、各要素がさまざまな方向、アニメーションで表示されます。
デモページも用意されており、こちらはタイムラインのコンテンツで、時間軸に次々に要素が集まってきます。
Swift Parallaxの使い方
Step 1: 外部ファイル
jquery.jsと当スクリプト、当スタイルシートをhead内に外部ファイルとして記述します。
<head> ... <!-- Iclude jQuery (laters version) --> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <!-- Include Swift Parallax files --> <link rel="stylesheet" href="css/swift.css"> <script src="js/swift.js"></script> </head>
Step 2: JavaScript
外部ファイルを記述した下あたりに、スクリプトをセットします。
<script type="text/javascript">
$(window).scroll(function(e) {
swift();
});
</script>
Step 3: エレメントにエフェクトを与える
基本書式は、下記のようになります。
swiftAdd('type', 'selector', 'axis', 'initial position', 'final position', 'length of transition', 'delay', 'links');
値をいれると、こんな感じに。
swiftAdd('dom', '#move_1', 'top', 'top', '0', '200', 'auto');
#move_1をスクリーンの上部に配置し、自動的にアニメーションをはじめ、200px下にスクロールさせた後、最終の位置に移動します。
各値は、下記のようになります。
- type
- 要素のタイプ（dom or bg、DOM要素または背景）
- selector
- 対象となる要素をjQueryのセレクタで指定
- axis
- 要素が動く時の軸（top or left、垂直または水平）
- initial position
- アニメーションを開始する時のポジション
- final position
- アニメーションが終了する時のポジション
- length of transition
- アニメーションの長さ
- delay
- 遅延時間
- links
- 同じ要素にもう一つアニメーションがあるかどうかの定義
sponsors
Post on:2014年4月9日