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

コラム

jqFloat.jsは、コンテンツ要素をふわふわ動くような挙動をさせるjQueryのプラグインです。
フローティングという感じの動作をしてくれます。
コンテンツ要素をフローティングさせるため、枠取りをきっちりしておかないと他のコンテンツにまでフローティングしているコンテンツが侵入するため、そのあたりを気にしたいところだと感じました。
使いどころは少ないかもしれませんが、要所要所で使う分にはポイントになると思います。
今回は「position="absolute"」を使っています。
ちょっとしたノウハウ習得にもつながりやすいかな？と思います。

「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

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

jQuery/JS Chips

コンテンツ要素に動きを出すことが出来るjQueryプラグイン

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

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

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

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

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

本家サイト

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

jqFloat.js本家

ダウンロードと組み込みサンプル

組み込み済みファイルのダウンロード

phptemp_jf_161124.zip

組み込み済みサンプル

サンプルです。

組み込み済みサンプル

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

元になるWEBサイトテンプレート（PHP）について

当サイト内の「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を修正するため、特に読み込ませる新たなファイルはありません。

動作させるためのjs記述

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

<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部分の内容について

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）の修正にあたって、以下の点に配慮しています。