Wabern / Schweben-Effekt in jQuery

Mittwoch, 26. Juni 2013

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:

<body>
   <div class="box"></div>	
</body>

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);