Script flocons de neige

[LaureT]

Bonjour,

Suite à l'annonce : https://forum.forumactif.com/t382515p30-decorez-vos-forums-pour-les-fetes-de-fin-d-annee#3221668
j'ai installé la Neige sur le forum ... ça fonctionne et c'est joli.
J'ai cherché un peu partout pour avoir des flocons différents à la place des billes blanches
et qui descendent sur toute la page.
Exemples avec un mélange de flocons différents, je trouve cela très joli :
http://peters1.dk/tools/snow.php?l=fr
https://dev.windows.com/en-us/microsoft-edge/testdrive/demos/LetItSnow/
J'ai trouvé de jolies choses ici : http://www.e-monsite.com/forum/vos-trucs-et-astuces/que-tombe-la-neige.html
Rien ne fonctionne sur mon forum.
Je n'y connais absolument rien en Javascript.
Je ne sais pas si pour quelqu'un d'entre vous ce serait long de modifier le script déjà existant ici pour avoir une jolie page avec des flocons de différentes formes de haut en bas.
Ou alors m'aider à mettre en place celui qui est sur cette page : https://dev.windows.com/en-us/microsoft-edge/testdrive/demos/LetItSnow/
Par avance un GRAND MERCI.

Bon dimanche à tous.

[Invité]

Bonsoir,

Le code sur le deuxième lien donné ( http://peters1.dk/tools/snow.php?l=fr ) fait son taff.
Seulement il est bien indiqué qu'il faut modifier et mettre la bonne adresse de l'image(celles présentes sur le site n'y agirons pas):

// N´OUBLIEZ PAS: De changez le chemin vers l´image snow.png
snow_img = "http://www.domain.com/snow.png";

On peut changé le script donné sur le site et en le mettant sans balises "<script></script>" et en le mettant dans la gestion des codes javascript sur toutes les pages:

Code:

/////////////////////////////////////////////////////////
// Javascript made by http://peters1.dk/tools/snow.php //
/////////////////////////////////////////////////////////

// N´OUBLIEZ PAS: De changez le chemin vers  l´image snow.png
snow_img = "http://i.imgur.com/Nuntvug.png";

// BONUS: Vous pouvez facilement regler le nombre de flocons que vous voulez sur chaque page...
snow_no = 15;

if (typeof(window.pageYOffset) == "number")
{
   snow_browser_width = window.innerWidth;
   snow_browser_height = window.innerHeight;
}
else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
   snow_browser_width = document.body.offsetWidth;
   snow_browser_height = document.body.offsetHeight;
}
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
   snow_browser_width = document.documentElement.offsetWidth;
   snow_browser_height = document.documentElement.offsetHeight;
}
else
{
   snow_browser_width = 500;
   snow_browser_height = 500;   
}

snow_dx = [];
snow_xp = [];
snow_yp = [];
snow_am = [];
snow_stx = [];
snow_sty = [];

for (i = 0; i < snow_no; i++)
{
   snow_dx[i] = 0;
   snow_xp[i] = Math.random()*(snow_browser_width-50);
   snow_yp[i] = Math.random()*snow_browser_height;
   snow_am[i] = Math.random()*20;
   snow_stx[i] = 0.02 + Math.random()/10;
   snow_sty[i] = 0.7 + Math.random();
   if (i > 0) document.write("<\div id=\"snow_flake"+ i +"\" style=\"position:absolute;z-index:"+i+"\"><\img src=\""+snow_img+"\" border=\"0\"><\/div>"); else document.write("<\div id=\"snow_flake0\" style=\"position:absolute;z-index:0\"><a href=\"http://peters1.dk/tools/snow.php\" target=\"_blank\"><\img src=\""+snow_img+"\" border=\"0\"></a><\/div>");
}

function SnowStart()
{
   for (i = 0; i < snow_no; i++)
   {
      snow_yp[i] += snow_sty[i];
      if (snow_yp[i] > snow_browser_height-50)
      {
         snow_xp[i] = Math.random()*(snow_browser_width-snow_am[i]-30);
         snow_yp[i] = 0;
         snow_stx[i] = 0.02 + Math.random()/10;
         snow_sty[i] = 0.7 + Math.random();
      }
      snow_dx[i] += snow_stx[i];
      document.getElementById("snow_flake"+i).style.top=snow_yp[i]+"px";
      document.getElementById("snow_flake"+i).style.left=snow_xp[i] + snow_am[i]*Math.sin(snow_dx[i])+"px";
   }
   snow_time = setTimeout("SnowStart()", 10);
}
SnowStart();

Concernant l'URL d'E-monsite elle pointe vers un site qui donne des liens obsolètes et qui au final contiendrons des astuces qui feront la même chose que ce que l'on a déjà,donc inutile.
Sinon,pour la demande concernant le site Microsoft je doute que cela soit mis à disposition car il n'y a aucune information aucun codes à insérer...
Dans tous les cas si je me trompe c'est un travail de titan voire de larbin.......... Il faudrait créer une page HTML et y mettre la structure déjà présente comme sur ce lien:

- https://testdrive-archive.azurewebsites.net/performance/letitsnow/

Ensuite,il faudrait modifier toutes les parties qui pointent vers un script JS exemple:

Code:

<audio id="music" src="./res/LetItSnowShort.mp3" loop="" autoplay=""></audio>
    <!-- common libraries -->
    <script type="text/javascript" src="./js/classes.js"></script>
    <script type="text/javascript" src="./js/touch.js"></script>
    <script type="text/javascript" src="./js/animation.js"></script>
    <script type="text/javascript" src="./js/gfx.js"></script>
    <!-- holidays postcard -->
    <script type="text/javascript" src="./js/postcard.js"></script>
    <!-- stars and snowflakes -->
    <script type="text/javascript" src="./js/snowflakes.js"></script>
    <!-- system information -->
    <script type="text/javascript" src="./js/systemInformation.js"></script>
    <!-- gradient animation -->
    <script type="text/javascript" src="./js/gradient.js"></script>
    <!-- UI and initialization code -->
    <script type="text/javascript" src="./js/default.js"></script>
    <!-- testdrive standard -->
    <script type="text/javascript" src="../../Includes/Script/TestDriveCommon.js"></script>
    <script type="text/javascript" src="../../Includes/Script/ReturnAndShareControls.js"></script>

Les fichiers sont déjà hébergés en cliquant sur open link via l'outil du développeur:


Et donne par ex: ( https://testdrive-archive.azurewebsites.net/performance/letitsnow/js/animation.js )
Idem pour les fichiers css et l'image ( https://testdrive-archive.azurewebsites.net/performance/letitsnow/Messages/Message2.png )
On la modifie via CSS et pour bien en finir avec tout ça on doit créer un iframe avec l'adresse de notre page html là où l'on veut la déco...
Bref! Trop long... Oubliez cette façon à mon humble avis

Bon courage!

Cordialement.

[LaureT]

Bonsoir Don Vito Corleone,

Tout d'abord, merci pour cette longue réponse.
Comme je n'y connais rien en JavaScript, j'espère que cela ne vous a pas pris trop d'heures.

Je viens de copier votre 1ère proposition :

/////////////////////////////////////////////////////////
// Javascript made by http://peters1.dk/tools/snow.php //
/////////////////////////////////////////////////////////

// N´OUBLIEZ PAS: De changez le chemin vers l´image snow.png
snow_img = "https://i.imgur.com/Nuntvug.png";
.......

sur mon forum, et c'est très joli, il y a un mélange de petits points blancs et de flocons bleus et blanc, j'aime beaucoup et vous remercie sincèrement.

Je n'ose même pas poser d'autres questions me permettant de comprendre un minimum de choses ne serait-ce sur le script ci-dessus.

J'en pose une seule tout de même : pourquoi les petits points blancs vont jusqu'en bas de la page, et les flocons bleus-blanc juste en haut de la page ?

Surtout ne passez pas des heures à m'expliquer, même si je ne vous cache pas que j'adorerais comprendre bien plus de choses sur ces JavaScript.

Je relirai tout cela à tête reposée demain.
J'espère que pour vous, cela a été plus un plaisir de me répondre, plutôt qu'une contrainte.
UN TRES GRAND MERCI.

Je vous souhaite une très bonne fin de soirée.

[Invité]

Bonsoir,

De rien avec plaisir et non pas du tout cela n'a pas pris de temps,j'avais juste enlevé les balises ouvrantes et fermantes rien de bien long
Vous pouvez aussi poser toutes les questions que vous voulez (le sujet est ouvert) et je ferais de mon mieux pour répondre moi ou d'autres car au final nous sommes au même point
Je n'ai pas plus de connaissances que vous;je teste teste et re-teste ou lis de la documentation sur google et ce forum.

Pour ce qui est de votre question pour que les flocons descendent jusqu'en bas je n'ai pas le même soucis car les deux scripts s'arrêtent au même point néanmoins pour celui proposé en haut il faudrait juste modifier cette partie dans le code:

Code:

  if (snow_yp[i] > snow_browser_height-50)

Par ceci:

Code:

  if (snow_yp[i] > snow_browser_height+500)

J'en profite pour donner le peu d'informations que j'ai,sur la vitesse du défilement des flocons en modifiant le chiffre 10 dans ceci:

Code:

 snow_time = setTimeout("SnowStart()", 10);

J'ai,je pense répondu à vos questions mais si vous avez d'autres interrogations,posez-les nous
Pour ce qui de mieux comprendre le javascript css html Etc.. il y a aussi de la documentation plein à craquer sur le net,des livres aussi.


Pour ce qui est du plaisir,je vous rassure,il est partagé.
Aucune contrainte juste du plaisir n'hésitez-pas

Cordialement.

[LaureT]

Bonjour,

Un grand merci.

J'ai mis : +1000 pour qu'ils descendent jusqu'en bas.
J'ai également réussi à augmenter le nombre de flocons.

Cordialement.

[Chacha]

..	Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif