• Faire tomber des flocons en javascript

    S'il est un sujet récurent, c'est la mise en place d'une animation de neige sur son blog à l'approche des fêtes de fin d'année. En farfouillant un peu sur le net, j'ai trouvé un code javascript plutôt pas mal.

    Je vais donc vous expliquer comment le mettre en place sur votre blog et comment le modifier.

    Attention, pour fonctionner, il faut que le javascript soit activé sur votre compte.


    En premier lieu, choisissez l'image de votre flocon. Une image gif fait l'affaire. Celle dans cet article est Animation de Neige en javascript

    Vous pouvez en choisir une autre proposée parmi celles du site du créateur du script.

    Vous pouvez aussi choisir votre propre image.
    Enregistrez le fichier image sur votre blog (Contenu / Gérer les fichiers)

    Ensuite, copiez le code ci-dessous dans un éditeur de texte (notepad++ , bloc-notes, etc.).
    Remplacez l'url dans SNOW_Picture = "http://www.domain.com/billeder/snow.gif"  par celle ou se trouve votre image de flocon.
    Enregistrez le fichier sous le nom: snow.js et mettez-le sur votre blog.

     

     

    Enfin, pour activer le script, il vous suffit de coller le code suivant dans un module si vous voulez que le script soit actif sur toutes les pages de votre blog ou dans un article de la page ou vous voulez que la neige tombe. Veillez à remplacer la partie surlignée en jaune par l'emplacement ou vous avez stocké le fichier snow.js

    <script type="text/javascript" src="http://www.domain.com/scripts/snow.js"></script>

     

    Si vous modifiez le fichier snow.js pour le mettre uniquement sur un article (comme je l'ai fait ici), placez cette ligne pour lancer le script à la fin de l'article. En effet, ce script se basant sur la hauteur de l'élément (ici l'article), il faut que l'élément soit construit avant de connaître sa hauteur. En plaçant la ligne en haut de l'article, le calcul de hauteur ne se fera que sur ce qui existe déjà : Le titre

    Voilà, si vous avez tout bien suivi, il neige sur votre blog !

    Ah non, ce n'est pas ce que vous vouliez ? Vous souhaitiez que la neige n'apparaisse que sur le header ?
    Ok, pas de problème 

     Voici le code du fichier snow.js correspondant. J'ai juste fait une adaptation par rapport au header et corrigé la formule de positionnement pour que ça fonctionne. Et n'oubliez pas d'appliquer la méthode expliquée plus haut avant de mettre le fichier sur votre blog.

     

    Voilà je vous souhaite plein de féérie sur votre blog.