VirtuousWebVirtuousWebVirtuousWeb

L’objectif de ce script était de créer une ambiance dans une page web, et pour cela il fallait éviter que l’effet soit redondant pour ne pas lasser. Aussi la plupart des éléments de ce script seront complètement aléatoires. Pour cela la page ne doit contenir aucun élément à la base pour que nous puissions jouer avec différentes variables comme le nombre. Nous jouerons aussi avec la hauteur des rayons et leurs largeurs, ainsi que l’opacité. Pour cela rien de tel que du CSS3 plutôt que des images!

La démonstration

Le plugin subMarine

Cet effet fonctionne sur les navigateurs supportant le CSS3 bien sûr, soit les derniers Firefox, Safari, Chrome et sans doute sur mac (clin d’oeil dans la direction d’un certain Manu). Je remarque les limites de mon navigateur favori Firefox qui rame un peu sur l’animation, contrairement aux 2 autres qui assurent.

Ce petit effet utilise notre bonne bibliothèque jQuery, et le plugin timers (par conséquent il faudra utiliser la version 1.3.2 de jQuery, sinon vous devrez utiliser un bon vieux setInterval pour faire la boucle, ce qui n’est pas plus mal.)

Notre structure HTML est archi simple, en effet nous allons nous servir d’un repère et créer à l’intérieur les élement qui feront les rayons.

Puis voici le CSS assez léger également, mais comportant tout le CSS3 pour créer notre reflet. J’aurais aussi pu faire le dégradé du background… mais je ne l’ai pas fait… Si vous voulez changer la couleur du background il vous faudra aussi adapter la couleur de fin du reflet. On utilise des tailles par défaut mais qui seront recalculées par javascript, ainsi que l’opacité.

body {
	background:#006699 url(../images/top.png) repeat-x;
}
#reflets {
	position:relative;
	width:900px;
	margin:0 auto;
}
.gradient {
	position:absolute;
	background: #fff; /* for non-css3 browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#006699)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #fff,  #006699); /* for firefox 3.6+ */
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
	-o-transform: rotate(-15deg);
	opacity:0.3;
	top:-20px;
}

Voici comment appeler le plugin, si vous utilisez un id ‘reflets’ :

$(document).ready(function(){
	$("#reflets").subMarine();
});

Je vous mets également le plugin complet ici, si vous voulez le détailler tranquillement.

jQuery.fn.subMarine = function(){
	var bloc = $(this).width();
    var chiffre = (Math.floor(Math.random() * 10)) + 5;
    for (i = 0; i < chiffre; i++) {
        $(this).append('


');
        var pos = Math.floor(Math.random() * bloc);
        var hauteur = (Math.floor(Math.random() * 100)) + 200;
        var largeur = (Math.floor(Math.random() * 30)) + 20;
        $(".g" + i).css({
            left: pos,
            height: hauteur,
            width: largeur,
            opacity: 0
        });
        jQuery.fn.mouv = function(){
            var posNew = Math.floor(Math.random() * bloc);
            var hauteurNew = (Math.floor(Math.random() * 100)) + 200;
            var largeurNew = (Math.floor(Math.random() * 30)) + 20;
            var niveau = (Math.random() * 0.3) + 0.2;
            var duree = (Math.floor(Math.random() * 3000)) + 15000;
            $(this).animate({
                left: posNew,
                height: hauteurNew,
                width: largeurNew,
                opacity: niveau
            }, duree);
        };
        $(".g" + i).mouv();
        var j = i;
        for (j = 0; j < chiffre; j++) {
            $(".g" + i).everyTime(15000, function(){
                $(this).mouv();
            });
        }
    }
};

Alors je n'ai pas fait le boulot complètement, car l'idéal aurait été que je mette des petites variables à modifier à l'extérieur, comme le nombre minimum et max... J'ajouterai ça plus tard. ^^

J'espère que ce petit script vous inspirera, n'hésitez pas à donner vos remarques.
A bientôt !