指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」 の記事でも、要素を「ふわふわ」と動かすjQueryプラグインjquery.yurayura.jsについて紹介させていただきましたが、今回紹介させていただく「jqFloat」プラグインでも同様の動きを実現できます。
プラグイン提供先でも動きを確認できますが、jqFloatにより複数の要素を同時に縦にも横にも動かすことができるので、特に可愛いイラスト中心のサイトとかだとかなり使えるプラグインではないかと思います。
jqFloat のダウンロード
以下のページよりjqFloatのファイルをダウンロードします。jqFloat
プラグイン提供サイトにjqFloatを利用したデモ画面がありますので、実際の動きを確認することができます。
jqFloat の設置
jQueryファイルと一緒にjqfloat.jsを設置します。<script src="./jquery.min.js"></script> <script src="./jqfloat.js"></script>
HTML側のサンプルと動きの調整
要素のデザイン
動かしたい要素に対してposition:absoluteを指定します。
<style>
#contents {
position:relative
}
#box {
position:absolute;
top:0;
left:0 ;
background:#dd0000;
width:100px;
height:100px
}
</style>
動きの調整
あとは動かしたい要素（以下のサンプルであればbox）を指定し、値を変えて動きの調整を行います。
<script type="text/javascript">
$(document).ready(function() {
$('#box').jqFloat({
width: 100,
height: 100,
speed: 500
});
});
</script>
<div id="contents">
<div id="box"></div>
</div>
オプションであるwidthで横に移動する距離、heightで縦に移動する距離を指定します。縦方向だけに動かしたい場合は、width:0とします。speedは要素を動かす早さで、値が大きくなればゆっくり動いて見えます。要素を複数指定
「ふわふわ」動かしたい要素を複数指定することもできます。
<script type="text/javascript">
$(document).ready(function() {
$('#box1').jqFloat({
width: 100,
height: 100,
speed: 500
});
$('#box2').jqFloat({
width: 50,
height: 150,
speed: 1000
});
});
</script>
<div id="contents">
<div id="box1"></div>
<div id="box2"></div>
</div>
box1、box2の各要素で移動の距離やスピードなどを自由に変えることができます。以下に簡単なサンプルを用意しました。
jqFloat による「ふわふわ」揺れる要素のデモ
コメント