【jQuery】スクロールに合わせてスライドインする「flowup.js」

ふわっとしたエフェクトが綺麗なjQueryプラグインを紹介します。

※公式の記述方法と、それをコピペしたであろう紹介記事でコードが間違っているものが多いです！ご注意ください（後述）。

この記事の目次

DEMO

See the Pen [jQuery]flowupを導入してみた by nkmrkisk (@rekid) on CodePen.

参照元：http://www.dominikgorecki.com/download/flow-up/

綺麗なふわっとしたエフェクトが綺麗なjQueryプラグインです。

導入方法

まず、githubからソースをダウンロードさせてもらいます。

ダウンロード

サンプルコード

ダウンロードしたcssとjsファイル、およびjQueryを参照しつつコードを記述します。これだけで動きます。

 title="記述サンプル"]
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel='stylesheet prefetch' href='flowup.css'>
</head>
<body>
<!-- ここにHTMLが入ります。 -->
<div class="container">
   <p>text text text text text</p>
   <p>text text text text text</p>
   <p>text text text text text</p>
   <p>text text text text text</p>
</div>
<!-- ここにHTMLが入ります。 -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='flowup.js'></script>
<script>
$(document).ready(function() {
   $(".container").flowUp("p", {
      translateY: 150, 
      duration: 8 
   });
});
</script>
</body>
</html>

公式の間違いについて

公開されている方のwebでの記載、コードの記述の「translateY」が「transalteY」と表記されています。。一応報告中

それにともなって、日本語で紹介されてるほとんどの記事も誤ったままになってます＞＜。。下でオプションを触ったDEMOを載せているんですが、それで20分ほどハマりましたｗ

「flowup.js」のオプション

「flowup.js」では２種類のオプションを設定することができます。

translateY

translateYはそのまま、移動距離の指定になります。どうやら発火するタイミング自体はjQueryで完全に制御されている仕様みたいなので、設定できるのはどの位置から「translateY:0;」に向かってくるのか。という指定になります。

ちなみに、ネガティブな値（-1000とか）も入力できます。上から降ってくるようなエフェクトになるので、これはこれで使ってみたい挙動になります。

See the Pen [jQuery]flowupを導入してみた２ by nkmrkisk (@rekid) on CodePen.

duration

「duration」では発火から完了までの時間を設定できます。秒単位（1 = 1秒）のようです。

あとがき

web系の記事でたまに、「これ、この人自分では試さずに載っけてるなぁ」というのを見かけることがあります。。
人は人、自分は自分ですが、周りに良くも悪くも影響を与える立場なので、自分で試した上で、出来る限り正しい情報を公開できるようにしていきたいなって思いました（独り言）