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

Post on:2015年10月9日

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

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

サイトのキャプチャ

Flow Up

Flow Upのデモ

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

サイトのキャプチャ

デモーページ

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

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

デモのアニメーション

デモの動き

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

Flow Upの使い方

Step 1: 外部ファイル

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

<body>
  ...
  コンテンツ
  ...
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="flowup.js"></script>
</body>

Step 2: HTML

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

<body>
  <p>パネル</p>
  <p>パネル</p>
  <p>パネル</p>
  <p>パネル</p>
  <p>パネル</p>
</body>

Step 3: JavaScript

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

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

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

$(document).ready(function() {
    $("body").flowUp("p");
 });

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

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

sponsors

top of page

©2024 coliss