[JS]ふわりとした動きが気持ちいい！スクロールするとコンテンツが後から追いかけるように表示されるスクリプト - Flow Up

ページをスクロールすると、垂直に配置されたコンテンツやパネルが後から追いかけるようにふわりと定位置に配置されるシンプルなスクリプトを紹介します。

ずっと気にかけてたエフェクトだったのですが、このスクリプトを使うと簡単に実装できます。

Flow Up

• Flow Upのデモ
• Flow Upの使い方

Flow Upのデモ

デモは縦長ページで、パネルが垂直方向に等間隔に配置されています。

デモーページ

スクロールすると、いい感じに追従してくれます。
遅れ具合やタイミングは変更が可能です。

分かりにくいかもしれませんが、GIFアニメにしてみました。

デモの動き

スクロールすると、後から追いかけるようにふわりと定位置に収まります。

Flow Upの使い方

Step 1: 外部ファイル

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

[html]

...
コンテンツ
...



[/html]

Step 2: HTML

各パネルは、p, div, articleなどで実装します。

[html]

パネル

パネル

パネル

パネル

パネル

[/html]

Step 3: JavaScript

ラッパーとパネルをjQueryのセレクタを指定し、スクリプトを実装します。

[javascript]
$(document).ready(function() {
$("CONTAINER-SELECTOR").flowUp("FLOW-UP-ELEMENTS-SELECTOR");
});
[/javascript]

上記のHTMLだと、こんな感じに。

[javascript]
$(document).ready(function() {
$("body").flowUp("p");
});
[/javascript]

オプションでは、遅れる時のY軸やタイミングが設定できます。

[javascript]
$(document).ready(function() {
$("CONTAINER-SELECTOR").flowUp("FLOW-UP-ELEMENTS-SELECTOR", { transalteY: 350, duration: 1 });
});
[/javascript]