Un thème animé : cercles "pops" aléatoires...

Je vous propose aujourd'hui un petit fragment de code qui vous permet d'avoir un thème "pop" et animé sans l'aide d'aucune image mais simplement via programmation. Le code est simple à mettre en place sur n'importe quel thème puis qu'il n'y a qu'une ligne de CSS et un script à ajouter juste avant la balise </BODY>.
Il fait quoi ce code ?
Il affiche des cercles "pops" animés, en transparence, aléatoires et de différentes couleurs, elles aussi aléatoires, mais le mieux et de visualiser sur ce blog test : http://widget-ob.overblog.com/...

Le CSS à ajouter juste avant la balise </STYLE> du code HTML de votre thème :

Copiez le source HTML de ce Thème

    					drawingpix { 
   					position:absolute; 
						top:-50px; 
						left:-50px;
						}

Et le script à ajouter juste avant la balise </BODY> du code HTML de votre thème :

<script>
function dream(){
    //Calcul des couleurs aléatoires
    var color = 'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';

    //Calcul de la position horizontale aléatoire
    var x = Math.floor(Math.random()*$(window).width());

    //Calcul de la position verticale aléatoire
    var y = Math.floor(Math.random()*$(window).height()-450);

    //création des cercles pops animés
    drawingpix = $('<span>').attr({class: 'drawingpix'}).hide();

                            //appending it to body
                             $(document.body).append(drawingpix);

                             //styling dream.. filling colors.. positioning.. showing.. growing..fading
                             drawingpix.css({
                                            'background-color':color,
                                            'border-radius':'100px',
                                            '-moz-border-radius': '100px',
                                            '-webkit-border-radius': '100px',
                                            top: y-14,    //offsets
                                            left: x-14 //offsets
                                            }).show().animate({
                                                                height:'500px',
                                                                width:'500px',
                                                                'border-radius':'500px',
                                                                '-moz-border-radius': '500px',
                                                                '-webkit-border-radius': '500px',
                                                                opacity: 0.1,
                                                                top: y-250,    //offsets
                                                                left: x-250}, 3000).fadeOut(2000);
                            
                           
                             window.setTimeout('dream()',200);
 }
 //initialisation à la fin du chargement de la page
 $(document).ready(function() {
                   dream();
         });
 </script>