[JS]使い方は簡単!要素や背景をスクロールに合わせてアニメーションさせるスクリプト -Swift Parallax

スクロールした際にコンテンツと背景を異なるタイミングで移動させたり、スクロールすると各要素をさまざまなアニメーションで表示させたりなど、スクロールに合わせて要素や背景をアニメーションさせるjQueryのプラグインを紹介します。

サイトのキャプチャ

Swift Parallax

Swift Parallaxのデモ

ページ自体がスクリプトのデモになっています。

サイトのキャプチャ

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

top of page

©2018 coliss