アトリエロワ

jsでふわふわ縦に揺れる

jquery.yurayura.jsをダウンロードして、 「jquery.yurayura.js」で保存

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="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.yurayura.js"></script>

パーツを配置するページにjsを記述

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

cssを設定

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

HOME > javascript > jsでふわふわ縦に揺れる

javascript

javascript

+ More