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

jQueryプラグイン・ライブラリ

2012.12.042018.01.06

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

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

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

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>