The Troll's factory » noël http://trollfactory.fr Geekeries & pensées Mon, 09 Jun 2014 19:43:25 +0000 fr-FR hourly 1 https://wordpress.org/?v=4.1.41 Neige qui tombe : Un peu de gaieté sur votre site web pour Noël http://trollfactory.fr/neige-qui-tombe-un-peu-de-gaiete-sur-votre-site-web-pour-noel-54 http://trollfactory.fr/neige-qui-tombe-un-peu-de-gaiete-sur-votre-site-web-pour-noel-54#comments Sun, 20 Dec 2009 23:04:09 +0000 http://trollfactory.fr/?p=54 Salut à tous,

Alors aujourd’hui et comme tous les ans à Noël j’ai décidé de mettre un petit peu de nouveau, un petit détail qui met du piment dans la vie du visiteur, sur mes sites Internet. Mise à part changer – quand on a un graphiste sous la main – la bannière ou son avatar pour y rajouter des décos de Noël, quand on est plutôt tourné développement web, on fait tomber des flocons !

Le code que je vais vous proposer n’est pas de moi, mais j’y ai tout de même fait un certain nombre de modification, et notamment une qui permet de le rendre compatible avec Google Chrome et Firefox quand un doctype est présent (car cela ne fonctionnait, sous ces navigateurs, que lorsqu’il n’y avait pas de doctype :o ).

Ce code est à placer où vous voulez, il a été modifié de manière à attendre la fin du chargement de la page pour se lancer, pour éviter les problèmes de compatibilité des commandes faites sur document.XXX et puis tout simplement pour ne pas ralentir l’affichage de la page :)

Après m’être battu une bonne demi-heure avec WordPress pour gagner le droit d’insérer du code dans un post, et qui plus est, sans que celui-ci soit interprété, voici donc le code à utiliser :

Je vous remercie d’avance d’HEBERGER L’IMAGE SUR VOTRE PROPRE SITE et non de la charger depuis l’url qui est dans le script.
De toutes façons ça va planter car je vais mettre un .htaccess anti-pompage d’image ;)

<SCRIPT type="text/javascript" >
var snowsrc='http://trollfactory.fr/img/snow.gif'; // VOUS ETES PRIE DE BIEN VOULOIR HEBERGE L'IMAGE CHEZ VOUS !
var no = 12;
var ns4up, ie4up, nn6up, doc_width, doc_height;
var dx, xp, yp;
var am, stx, sty;

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

var snowspeed = 100;

function snowNS() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", snowspeed);
}

function snowIE() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", snowspeed);
}

function snowNN6() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top = yp[i]+'px';;
document.getElementById("dot"+i).style.left = Math.abs(xp[i] + am[i]*Math.sin(dx[i]))+'px';
}
setTimeout("snowNN6()", snowspeed);
}

var initsnow = function() {
ns4up = (document.layers) ? 1 : 0;
ie4up = (document.all) ? 1 : 0;
nn6up = (document.getElementById) ? 1 : 0;
var i=0;
doc_width = screen.width;
doc_height = screen.height;

if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
} else if (nn6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {
if (i == 0) {
document.write("<layer name=dot"+ i +" left=15 top=15 visibility=show><img src='"+snowsrc+"' border=0></layer>");
} else {
document.write("<layer name=dot"+ i +" left=15 top=15 visibility=show><img src='"+snowsrc+"' border=0></layer>");
}
} else if (ie4up || nn6up) {
if (i == 0) { document.write("<div id=dot"+ i +" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=0></div>");
} else {
document.write("<div id=dot"+ i +" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=0></div>");
}
}
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
} else if (nn6up) {
snowNN6();
}
}

document.onload=initsnow();
</SCRIPT>

Les paramètres suivantes sont modifiables :

Variable « no » : Nombre d’images / flocons qui seront affichés.
Variable « speed snow » : Sa valeur peut varier de 1 (pas 0 sinon ça risque fort de planter) à 500, mais je vous déconseille d’aller au delà de 200 ou en dessous de 10. Plus la valeur est petit, plus les flocons bougent vite (oui c’est un peu l’inverse du mot « speed », mais ça vous ira !).

Et… c’est tout :) Ca ne fait pas beaucoup de paramètres, mais pour faire tomber des flocons, on est quand même pas en train de paramétrer Gentoo non plus :)

Pour ceux qui utilisent WordPress et qui souhaiterait mettre en place cette animation sympathique (à noter que ce n’est pas du flash mais du javascript, donc compatibilité avec une grand majorité de navigateurs) je vous conseille de placer le code dans le fichier « Pied de page » (footer.php). Que vous pouvez modifier en faisant depuis votre tableau de bord : Apparence >> Editeur >> Cliquer sur « Pied de page » dans la colonne de droite.

Voilà, enjoy ;)

Demain je vous parle (en théorie) du safe_mode de PHP utilisé avec le panel DTC (Digital Technology Control) ainsi que la création d’un principe de tâches cron léger et réellement géré en cron… mais contrôlé par PHP :) (ça aurait dû être aujourd’hui, mais petit contre-temps dirons-nous :D )

PS : Je ne connais pas l’auteur initial du script, je l’ai trouvé sur un petit site dont j’ai la certitude totale que ce n’est pas le gérant qui a créé le script, c’est pourquoi je n’ai pas cité de source :)

Share and Enjoy:PrintPDFTwitterFacebookLinkedInRSSWikio FRDiggdel.icio.usGoogle BookmarksTechnoratiSphinnMixxAdd to favoritesLiveNetvibesScoopeoviadeo FRIdenti.caMySpaceStumbleUponYahoo! Buzz

]]> http://trollfactory.fr/neige-qui-tombe-un-peu-de-gaiete-sur-votre-site-web-pour-noel-54/feed 6