指定した要素をただただ上下に揺らす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;
}


こんな感じっす。

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく