SwingOverlay ist ein einfaches Plugin für jQuery, welches über ein beliebiges Elemente wie zum Beispiel ein Bild oder ein div mehrere Balken legt. Diese Balken haben eine halbtransparenz und bewegen sich über dem definierten Objekte. Dabei werden zufällige Bewegungen "generiert", so das jeder Balken einzeln innerhalb des Elementes hin und her pendelt.
Diverse Optionen lassen sich über Parameter steuern. Eine einfach Demo liegt im SVN Archiv bereit.
Einbindung
Wie bei jedem jQuery ist die Einbindung sehr einfach. Die JS Datei einbinden und die Element per Klassen definieren, auf dem die Aktion ausgeführt werden soll.
jQuery(document).ready(function() {
jQuery(".swinger").SwingOverlay({speed:10000, count:10});
});<img src="kancha_arbeiter.jpg" border="0" class="swinger">
Parameter
| Paramter | default Value | Beschreibung |
|---|---|---|
| speed | 30000 | Geschwindigkeit der Balken |
| count | 5 | Anzahl der geünschten Balken |
| bgcolor | '#ffffff' | Farbe |
| randomspeed | 1 | Balken unterschiedlich schnell bewegen lassen; 'speed' wert wird zufällig um eine Prozent pro Balken erhöht |
| easing | 'swing' | jQuery easing: linier ode swing |
| minWidth | 2 | Minimale Breite eines Balkens |
| maxWidth | 20 | Maximale Breite eines Balkens |
VCS File:
/trunk/plugins/jquery.swingoverlay/demo.html
SVN Browser: jquery -> /trunk/plugins/jquery.swingoverlay/demo.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SwingOverlay</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.swingoverlay.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".swinger").SwingOverlay({speed:10000, count:10});
});
</script>
</head>
<body>
<div style="width:600px; height:200px; background-color:red;" class="swinger"></div>
</body>
</html>/trunk/plugins/jquery.swingoverlay/jquery.swingoverlay.js
SVN Browser: jquery -> /trunk/plugins/jquery.swingoverlay/jquery.swingoverlay.js
/**
* jQuery.SwingOverlay - Slide opacity divs over img/object to random positions
*
* $Id: jquery.swingoverlay.js 2 2011-01-22 09:45:02Z espendiller $
* $HeadUrl$
*
* Daniel Espendiller - http://www.espend.de/node/219
*
*/
;(function($){
$.fn.SwingOverlay = function(options) {
var defaults = {
speed: 30000,
count:5,
bgcolor:'#ffffff',
opacity:0.5,
randomspeed:1,
easing:'swing',
minWidth:2,
maxWidth:20
};
var options = $.extend(defaults, options);
// force img to be a block to remove silly spacing after img object
$(this).css('display', 'block');
// append wrapper after image
$('<div class="swingoverlay" />').insertAfter($(this));
// the wrapper is our working object
var worker = $(this).next();
// get the dimension of the img
var obj_width = $(this).width();
var obj_height = $(this).height();
// add some css styles to wrapper; to move it obove the img
$(worker).css({
'width': obj_width,
'height': obj_height,
'overflow': 'hidden',
'margin-top': '-' + obj_height + 'px',
'position' : 'relative'
});
// append the lines into wrapper
for (var i = 0; i < options.count; i++) {
$(worker).append('<div class="swingoverlay-line"/>');
}
// start an animation on every line
$(worker).find('.swingoverlay-line').each(function() {
// add css some css to overlay each line
$(this).css({
'left': Math.round(1 + obj_width * (Math.random())),
'width': Math.round(options.minWidth + options.maxWidth * (Math.random())),
'height': obj_height,
'background-color': options.bgcolor,
'position': 'absolute',
opacity: options.opacity
});
// function to start animation and some calc stuff
swing($(this), obj_width, options);
});
};
swing = function (line, width, options) {
//move to random position
var randommove = Math.round(1 + width*(Math.random()))
// calc position change in procent
var moveto = (100 / width) * (line.position().left - randommove)
// calc speed depening on pixel movement
var speed = Math.round(((options.speed / 100) * moveto))
// inverse speed when movie left
if (speed < 0) speed = speed * -1
// add some random speed
if (options.randomspeed == 1) speed += Math.round(speed * Math.round(Math.random()));
// animate and rerun this function if animate completed
jQuery(line).animate({left:randommove},{
easing: options.easing,
duration: speed,
complete: function() {swing(line, width, options)}
});
}
})(jQuery);