[JS]指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」｜jQueryプラグイン・ライブラリ

[JS]指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」

jquery.yurayura.js

スポンサード

この記事はモンキーレンチ様の記事を参考にさせていただきました。

jQuery を利用して画像を動かす方法には色々ありますが、指定した要素（画像など）を「ふわふわ」浮いているように見せるためのプラグインが jquery.yurayura.js です。

縦方向に「ふわふわ」動くイメージですが、移動距離とスピードの設定次第では面白い動きも実現できるかもしれません。

1 jquery.yurayura.js のダウンロード
2 jquery.yurayura.js の設置
3 デザイン制御と動きの調整

jquery.yurayura.js のダウンロード

以下のページより jquery.yurayura.js をダウンロードします。

jquery.yurayura.js

jquery.yurayura.js の設置

jQuery ファイルと一緒に jquery.yurayura.js を設置します。

<script src="./jquery.min.js"></script>
<script src="./jquery.yurayura.js"></script>
<script>
$(function(){
$('#box').yurayura( {
'move' : 5,
'delay' : 100,
'duration' : 1000
} );
});
</script>

$(function(){

$('#box').yurayura( {

'move' : 5,

'delay' : 100,

'duration' : 1000

} );

});

</script>

オプションですが、move は移動距離で、delay は両端での停止時間、
duration は移動にかける時間となるようです。

この値を調整しながら、要素を早く動かしたり、ゆったり動かしたりとサイトに合わせて見せ方を変えてみましょう。

デザイン制御と動きの調整

続いてデザインの方ですが、
「ふわふわ」動かす対象となる要素に position : absolute; を指定します。

<style>
#contents		{
position:relative
}
#box {
position : absolute;
top : 0;
left : 0;
background:#dd0000;
width:100px;
height:100px;
}
</style>
<div id="contents">
<div id="box"></div>
</div>