指定した要素をただただ上下に揺らすjQueryプラグイン

雲が浮いているような表現を実装したりするのに使えるjQueryプラグインです。

ソースは以下。

jQuery( function( $ ) {
  $.fn.yurayura = function( config ) {
    var obj = this;
    var i = 0;
    var defaults = {
      'move' : 5,     // 動く量
      'duration' : 1000,  // 移動にかける時間
      'delay' : 0     // 両端で停止する時間
    };
    var setting = $.extend( defaults, config );
    return obj.each( function() {
      ( function move() {
        i = i > 0 ? -1 : 1;
        var p = obj.position().top;
        $( obj )
          .delay( setting.delay )
          .animate( { top : p + i * setting.move }, {
            duration : setting.duration,
            complete : move
          } );
      } )();
    } );
  };
} );

使い方

まずはjQueryと一緒に読み込みます。

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.yurayura.js"></script>

そして、動かす要素を指定します。オプションとしてmove（動く量）、duration（移動にかける時間）、delay（両端で停止する時間）を設定できます。以下は#sampleBoxを揺らす場合の例です。下記のオプションは初期値として設定されているものと同値です。

$(function(){
  $('#sampleBox').yurayura( {
    'move' : 5,
    'delay' : 100,
    'duration' : 1000
  } );
});

ここで指定する要素の注意点として、positionがabsoluteでないとうまく動作しません。そのため、以下のようなスタイルを設定しておく必要がありますので注意してください。

#sampleBox {
  position : absolute,
  top : 0;
  left : 0;
}

こんな感じっす。