floating.js

「floating.js」は画像や絵文字、テキストなどの要素をページ上にフロートさせることができるjQueryプラグインです。

サンプルを見ていただいた方がわかりやすいと思います。

→ 要素を画面上にフロートさせるjQueryプラグイン「floating.js」サンプル

どういう場面で使おうか迷ってしまいそうですが、アイデア次第では面白いサイトが作れそうです。

使用方法

まずはこちらのサイトから一式ダウンロードしてきまましょう。

2016-12-06_1040

たくさんファイルがありますが、実際に使用するのはfloating.jsファイルです。

</body>の直前でfloating.jsを読み込ませて、設定します。

フロートさせる要素の動きはオプションで変更できます。

number ・・・ アイテムの数
duration ・・・ 上に到達するまでの秒数(小さいほどスピードがはやい) 
repeat ・・・ 何回リピートさせるかを設定(設定しなければ無限ループ)
direction ・・・ アニメーションのパターン( animation-direction参照 ↓↓)

normal
順方向のアニメーションのみを毎回実行します。言い換えるとアニメーションのサイクルごとに、初期状態にリセットされてからアニメーションが再び始まります。これはデフォルトのアニメーション順の設定です。
alternate
逆方向のアニメーションも毎回実行します。逆方向のアニメーションを行うときは、初期状態に戻るようなアニメーションになります。また、timing-functions の値も逆になります。例えば ease-in のアニメーションは、逆方向のアニメーションでは ease-out のアニメーションに置き換えられます。
reverse
アニメーションを毎回逆方向に実行します。アニメーションのサイクルごとに、最終状態にリセットされてからからアニメーションが再び始まります。
alternate-reverse
初回のアニメーションは逆方向に実行し、次は順方向に実行します。これを交互に繰り返します。

sizes ・・・ 要素のサイズ

最後にサンプルのソースを書いておきます。どうぞご参考まで。

この記事と関連してると思われる記事: