要素をフローティング（ふわふわ動くような挙動）させる「jqFloat.js」の使い方

要素をフローティング（ふわふわ動くような挙動）させる「jqFloat.js」の使い方

jqFloat.jsは、コンテンツ要素に動的な演出を加えることが出来るjQueryプラグインです。
一部的に動きを見せたい時や、要所要所で使うことが出来そうな感じがしています。
派手な演出をするためのjQueryプラグインではないので大掛かりなことをするのは難しいですが、ただ少し楽しくする時には十分に使えます。

設置自体は特に難しいモノではありませんが、コンテンツ位置の調整は必要になりそうです。
今回、サンプルに設置した時に色々配慮しなければいけないことがありました。

コンテンツ要素をふわふわ動作させるには、基準となる位置があって、その基準位置をスタート地点として動作します。
そのため、その基準位置がずれたところにあったり、基準位置を定めずにふわふわさせると、表示させたいところでコンテンツ要素を表示することが出来ません。
その基準位置を取る時に「position="absolute"」を使うため、その外の要素で枠取りをきっちりしなければいけません。

また、レスポンシブのため、スマホで表示する時のCSS記述も気を付けなければいけません。
サンプルのテンプレートはブラウザサイズを変更するとレスポンシブに切り替わりますが、コンテンツ要素の基準位置は変わりません。
そのため、ブラウザサイズに依存するレスポンシブでは使いにくいところなのかもしれません。

その点に注意して進めてくださいね。

本家サイトです。
本家からプラグイン一式をダウンロードして頂けます。

• jqFloat.js本家

phptemp_jf_161124.zip

サンプルです。

• 組み込み済みサンプル

メインのキャッチフレーズの部分をふわふわと動かしています。
「キャッチコピーを入れましょう」という部分です。

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

読み込ませたファイルは1枚のjsファイルのみです。
jQueryは新しいバージョンを読み込ませています。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jqfloat.js"></script>

あとのCSS調整などはテンプレート本体のCSSを修正するため、特に読み込ませる新たなファイルはありません。

以下の記述をヘッダに入れてください。

<script>
$(document).ready(function() {
	$('#main-txt').jqFloat({
		width: 300,
		height: 50,
		speed: 5000
	});
});
</script>

上記の「#main-txt」の部分はフローティングさせたいコンテンツ要素のidを入れてください。
本家サイトにオプションも書かれていますので、オプションも是非見てみてください。

$(document).ready(function() {
    //if no method and options specified
    //start the floating animation with defaults settings
    $('object').jqFloat();
 
    //if only options specified
    //start the floating animation with specified settings
    $('object').jqFloat({
        width: 300,
        height: 300,
        speed: 100
    });
 
    //stop the floating animation 
    $('object').jFloat('stop');
 
    //start the floating animation
    $('object').jFloat('play');
});

上記は本家サイトから抜粋した内容です。
上記のサンプル記述の「object」と書かれている表記は、先述の「#main-txt」の部分のことです。
適宜、書き換えてください。

オプション記述中の「width」や「height」や「speed」には適宜数字を入れて試してみてください。
動く幅や高さやスピードを触れるようになっています。

html部分を多少修正しました。

<div id="mainbg">
<div id="main"><div id="main-txt">キャッチコピーを入れましょう</div></div>
</div>

上記の修正に伴って、各種「main.css」3種の「メイン画像」部分を修正していますので、とりあえずはコピペでも構いませんので修正してください。

• フローティングさせるコンテンツ要素がはみ出さないように、外枠をきっちり取る必要があります。
  外枠には「position="relative"」を入れてください。
• フローティングさせるコンテンツ要素は「position="absolute"」で基準位置をつくってください。
• レスポンシブ対応の時には、スマホでの表示に気を付けてください。

上記がポイントになると思います。
上記のポイントを守ったCSS記述にしてください。

これらの設置や調整が完了されましたら、後は動作確認をしてください。
正常に動けば設置完了です。

レスポンシブ構成のサイトでは、PC用のフローティングコンテンツとスマホ用のフローティングコンテンツを用意してCSSで表示非表示をコントロールをした方がいいのかもしれません。
サイトの都合によって変わるため、サイトの状態に合わせて工夫するようにしてくださいね。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_160202.zip 」です。

いかがでしたでしょうか？
特に重くもなく動作しました。
これだったら、いくつも動作を重ねても全然大丈夫な感じがします。

使いどころが限られている感じがするjQueryプラグインですが、ポイントポイントで動的な演出をすることに長けています。
もし、自サイトに対して、動的な要素が少ないことに不満を感じている方がいらっしゃりましたら、是非一度使ってみてください。

しかし、この手のマイナーな（？）jQueryプラグインは、自分から探す気持ちがないと知ることがないような気がしました。
画像スライダーのようにどのようなサイトにでもありそうな機能ではないだけに、あまりメジャーな感じではありませんが、知っておいて損はないと思いました。

執筆 : 清水 隼斗

要素をフローティング（ふわふわ動くような挙動）させる「jqFloat.js」の使い方のAMPページ