特定の要素を”プリプリ”動かすjQueryスクリプト【コピペOK】
特定要素をプリプリ動かす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">以上で完了！
プリプリ生活を楽しみましょう！
※P.S：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。