The Troll's factory

Geekeries & pensées
-->

Neige qui tombe : Un peu de gaieté sur votre site web pour Noël

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:
  • Print
  • PDF
  • Twitter
  • Facebook
  • LinkedIn
  • RSS
  • Wikio FR
  • Digg
  • del.icio.us
  • Google Bookmarks
  • Technorati
  • Sphinn
  • Mixx
  • Add to favorites
  • Live
  • Netvibes
  • Scoopeo
  • viadeo FR
  • Identi.ca
  • MySpace
  • StumbleUpon
  • Yahoo! Buzz
posté par Troll dans Scripts, astuces, dév. web avec 6 commentaires

6 réponses à “Neige qui tombe : Un peu de gaieté sur votre site web pour Noël”

  1. Francis Terry dit :

    Salut, j’ai utilisé le code mais et ça fonctionne correctement avec firefox et chrome mais avec Internet explorer il ne se passe rien. Que faut-il faire? Merci

  2. Troll dit :

    Salut Francis,

    Hum, je dois avouer que ça fait trèèèès longtemps que je n’ai pas utilisé Internet Explorer.

    Tu pourrais me dire avec quelle version de Internet Explorer tu as testé ?

  3. Théo dit :

    Bonjour, j’ai fait un autre code:

    var snow = {

    wind : 0,
    maxXrange : 100,
    minXrange : 10,
    maxSpeed : 3,
    minSpeed : 1,
    color : "#fff",
    char : "*",
    maxSize : 25,
    minSize : 10,

    flakes : [],
    WIDTH : 0,
    HEIGHT : 0,

    init : function(nb){
    var o = this,
    frag = document.createDocumentFragment();
    o.getSize();

    for(var i = 0; i < nb; i++){
    var flake = {
    x : o.random(o.WIDTH),
    y : - o.maxSize,
    xrange : o.minXrange + o.random(o.maxXrange - o.minXrange),
    yspeed : o.minSpeed + o.random(o.maxSpeed - o.minSpeed, 100),
    life : 0,
    size : o.minSize + o.random(o.maxSize - o.minSize),
    html : document.createElement("span")
    };

    flake.html.style.position = "absolute";
    flake.html.style.top = flake.y + "px";
    flake.html.style.left = flake.x + "px";
    flake.html.style.fontSize = flake.size + "px";
    flake.html.style.color = o.color;
    flake.html.appendChild(document.createTextNode(o.char));

    frag.appendChild(flake.html);
    o.flakes.push(flake);
    }

    document.body.appendChild(frag);
    o.animate();
    window.onresize = function(){o.getSize();};
    },

    animate : function(){
    var o = this;
    for(var i = 0, c = o.flakes.length; i < c; i++){
    var flake = o.flakes[i],
    top = flake.y + flake.yspeed,
    left = flake.x + Math.sin(flake.life) * flake.xrange + o.wind;
    if(top < o.HEIGHT - flake.size - 10 && left 0){
    flake.html.style.top = top + "px";
    flake.html.style.left = left + "px";
    flake.y = top;
    flake.x += o.wind;
    flake.life+= .01;
    }
    else {
    flake.html.style.top = -o.maxSize + "px";
    flake.x = o.random(o.WIDTH);
    flake.y = -o.maxSize;
    flake.html.style.left = flake.x + "px";
    flake.life = 0;
    }
    }
    setTimeout(function(){
    o.animate();
    },20);
    },

    random : function(range, num){
    var num = num?num:1;
    return Math.floor(Math.random() * (range + 1) * num) / num;
    },

    getSize : function(){
    this.WIDTH = document.body.clientWidth || window.innerWidth;
    this.HEIGHT = document.body.clientHeight || window.innerHeight;
    }

    };

    window.onload = function(){
    snow.init(50);
    };

    exemple: -www.ts3tete66684.net46.net/Neige.php

  4. Troll dit :

    Sympa, effectivement.

    Par contre, il faut changer un peu les paramètres utilisés sur ta page d’exemple.

    En effet, non seulement ils sont trop nombreux / rapides d’un point de vu utilisateur (désagréable pour le lecteur de la page internet), mais surtout : ça fait bien ramer l’ordi !

    Ton ordi est peu être assez puissant, mais sur mon netbook avec un Atom 1.6GHz ben elle rame bien la page d’exemple :D

  5. cindy Hoareau dit :

    commen fait ton pour changer la couleur des flocon avec le premier code que vous avez donner merci

  6. Troll dit :

    Salut Cindy,

    Il suffit de changer l’image.

    Télécharge l’image ici

    Puis modifies-la et héberge-la quelque-part, puis change la ligne :


    var snowsrc='http://trollfactory.fr/img/snow.gif'; // VOUS ETES PRIE DE BIEN VOULOIR HEBERGE L'IMAGE CHEZ VOUS !

    par


    var snowsrc='URL_VERS_TON_IMAGE_COLOREE_ICI';

Poster un commentaire

Remplissez le formulaire suivant pour poster un message.
Nom
Email
Site internet
Votre commentaire