2015/07/14 (更新日: 2016/08/14)

特定の要素を”プリプリ”動かすjQueryスクリプト【コピペOK】

JavaScript PROGRAMMING

特定要素をプリプリ動かすjQueryスクリプトです。
プリプリしたい方はコードをコピペで利用できます。
» デモはこちら

JavaScript

以下のコードより先に、jQueryの読み込みをしておいてください。

<script>
jQuery( function( $ ) {
  $.fn.puripuri = 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
          } );
      } )();
    } );
  };
} );

// デフォルトの設定を変更したい場合は、以下を変更してください。
$(function(){
  $('#sampleBox').puripuri( {
    'move' : 10,
    'delay' : 100,
    'duration' : 500
  } );
});
</script>

CSS

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

HTML

<img  id="sampleBox" src="image.jpg">

以上で完了！
プリプリ生活を楽しみましょう！

JavaScript

• Tweet
• LINE
• Read Later