Ein kleines PlugIn zum Wabern / Wackeln / Schweben eines DIVs in jQuery: Das Ergebnis kann man auch bei jsfiddle anschauen und bearbeiten.
// (c) 99°, David Bascom 2013
// You may use this plugIn as you like, free of charge, but don't remove the (c)
(function(e){e.fn.extend({wabern:function(t){t=e.extend({centerX:false,centerY:false,speedX:3,speedY:5,distX:10,distY:10},t);this.each(function(){var n=e(this);var r=t.centerX?t.centerX:n.position().left;var i=t.centerY?t.centerY:n.position().top;var s=Math.random()*360;var o=Math.random()*360;var u=180/Math.PI;setInterval(function(){s=(s+t.speedX)%360;o=(o+t.speedY)%360;var e=r+t.distX*Math.sin(s/u);var a=i+t.distY*Math.cos(o/u);n.css({left:e,top:a})},40)})}})})(jQuery)
Das PlugIn kann dann so verwendet werden:
$(function () {
$('.box').wabern({speedX:3, speedY:5, distX:10, distY:10});
});
Beispiel HTML-Code dazu:
Und das CSS:
.box {
position: absolute;
top: 200px;
left: 200px;
width: 50px;
height: 20px;
background-color: #ff6600;
}
Die unkomprimierte Version des PlugIns zum „Spicken“:
// (c) 99°, David Bascom 2013
// You may use this plugIn as you like, free of charge, but don't remove the (c)
(function($){
$.fn.extend({
'wabern': function (opt) {
opt = $.extend( {
'centerX': false,
'centerY': false,
'speedX': 3,
'speedY': 5,
'distX': 10,
'distY': 10
},opt );
this.each( function () {
var _me = $(this);
var cX = opt.centerX ? opt.centerX : _me.position().left;
var cY = opt.centerY ? opt.centerY : _me.position().top;
var sX = Math.random()*360;
var sY = Math.random()*360;
var wm = 180/Math.PI;
setInterval( function () {
sX = (sX + opt.speedX)%360;
sY = (sY + opt.speedY)%360;
var x = cX + opt.distX * Math.sin( sX/wm );
var y = cY + opt.distY * Math.cos( sY/wm );
_me.css({left:x, top:y});
}, 40);
});
}
});
})(jQuery);