Effet de neige Javascript

Rédigé par Claudio Matarrelli catégorie Solutions Novembre 27, 2009 | 2 commentaires

Dans les premières années quand j'ai commencé à travailler sur le web ne sont pas nombreux dispositifs techniques permettant d'impressionner les visiteurs.
effets DHTML sont le seul élément à enrichir les pages.

Dans ce contexte, un classique utilisé par des milliers de sites a été la neige en hiver.

Il a été le script de plusieurs dizaines de KB, l'effet sans doute agréable, mais souvent un crash du navigateur en raison d'un chevauchement continu de couches, une pour chaque flocon de neige de nouveaux produits.

Toujours à naviguer sur le web, j'ai trouvé ces vieux scripts, ou une certaine reprise à l'ancienne toujours très lourds.

Pourquoi ne pas créer quelque chose de léger qui ne ralentit pas le chargement des pages qui n'envoie pas de saturer les ressources du navigateur et que vous ne pouvez pas ennuyer le lecteur?

C'est ce que j'ai essayé de le faire.

Le script a été testé sur les versions plus récentes des navigateurs populaires (IE, Firefox, Chrome, Opera, etc.) Mais je ne garantissons pas la compatibilité ascendante avec les anciens navigateurs 3-4 ans, en ce cas, il ne fonctionne pas si le problème n'est pas le script mais dans l'incapacité de mettre à jour, il est temps de le faire ... :-)

Si vous voulez utiliser le script ou bien écrire à ceux qui en ont besoin. La courtoisie que de laisser intacte la partie qui indique la source.

Les options sont bien documentés, il suffit de modifier les variables au début du script.

  • Nombre de paillettes;
  • Rapidité avec laquelle ils se déplacent;
  • La taille maximale des flocons;
  • Taille minimale des flocons;
  • Caractère général de flocons, ou encore l'image;
  • flocons de couleur;
  • Opacité; 
 numerofiocchi = 100 ; var tempo = 300 ; //millisecondi dimensionemassimafiocco = 40 ; //px dimensioneminimafiocco = 8 ; //px caratterefiocco = "*" ; /*consigliati * o punto. Script / * qui génère une chute de neige sur la page Web créée par claudio.matarrelli Matarrelli Claudio @ gmail.com (C.) 2009 www.matarrelli.com utilisée librement tant que de laisser le droit d'auteur * visible / / / configuration des variables var = numerofiocchi 100; temps var = 300 / / = 40 millisecondes dimensionemassimafiocco / / dimensioneminimafiocco px = 8 / / caratterefiocco px = "*", / * * recommandé ou un point.  "#F00" ; trasparenza = 0.5 ; //inizializzazione altre variabili var indice = 0 ; // funzione che genera un fiocco, cioè un * in un div posizionato assolutamente function fiocco ( idfiocco ) { document . write ( '<div id="neve' + idfiocco + '" style="filter:alpha(opacity=' + trasparenza * 100 + ');-moz-opacity:' + trasparenza + ';-khtml-opacity:' + trasparenza + ';opacity: ' + trasparenza + ';color:' + colorefiocco + ';font-size:' + Math . floor ( Math . random ( ) * ( dimensionemassimafiocco - dimensioneminimafiocco + 1 ) + dimensioneminimafiocco ) + 'px; position:fixed; top:' + Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px; left:' + Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px">' + caratterefiocco + '</div>' ) } //genera un numero di fiocchi pari a numerofiocchi impostato function generaFiocchi ( ) { for ( indice = 0 ; indice < numerofiocchi ; indice ++ ) { fiocco ( indice ) } } //sposta i fiocchi in modo random ogni volta che passa il tempo impostato function spostaFiocchi ( ) { for ( indice = 0 ; indice < numerofiocchi ; indice ++ ) { document . getElementById ( 'neve' + indice ) . style . top = Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px' ; document . getElementById ( 'neve' + indice ) . style . left = Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px' ; } setTimeout ( "spostaFiocchi()" , tempo ) ; } // avvia la generazione dei fiocchi generaFiocchi ( ) ; //esegue lo spostamento continuato spostaFiocchi ( ) ; Ou peut être ciré avec une balise d'image <img * src="http://indirizzo/immagine.jpg"> / colorefiocco = "# F00" transparence = 0,5, / / Initialisation de variables var index = 0; / / fonction qui génère un produit de base, qui est une fonction * dans un div discontinues position absolue (idfiocco) (document. write ('<div id =' neige '+ idfiocco + "style =" filter: alpha (opacity =' + opacité: "+ + de transparence»,-khtml-opacity:;)-moz-'+ + transparence, transparence * 100 +' opacité: "+ + de transparence», la couleur: "+ + colorefiocco; font-size:« + Math. étage (Math. aléatoire () * (dimensionemassimafiocco - dimensioneminimafiocco + 1) + dimensioneminimafiocco) '+ px; position: fixed; top: "+ Math. étage (Math. random () * écran. hauteur * 0,7) + "px; gauche:" + Math. étage (Math. random () * écran. largeur - 40) «px +" "+ + caratterefiocco> </ div> ')) / / génère un certain nombre de flocons à l'égalité numerofiocchi ) (fonction ((indice = 0; Index <mis generaFiocchi numerofiocchi; index + +) (arc (index))) / / déplacer les flocons au hasard chaque fois que vous passer le temps ensemble de fonctions spostaFiocchi () (pour (index = 0;; numerofiocchi index +) (document. getElementById (+ 'neige' + index <index). style. top = Math. étage (Math. random () * écran. hauteur * 0,7) '+ px'; document. getElementById ('neige' indice +). style. gauche = Math. étage (Math. random () * écrans. largeur - 40ème) '+ px';) setTimeout ("spostaFiocchi ()", temps);) / / start arcs génération generaFiocchi () / / exécuter le transfert continu spostaFiocchi ();

Pour l'installer, il suffit de télécharger le script sur votre serveur et inclure le bas de la page avant la balise </ body> 

  src="http://indirizzo/neve.js" <script language="JavaScript"> </ script>


2 réponses à "effet de neige Javascript"

  1. Flavio a écrit:
    27/11/2009 à 20:05

    Vous avez finalement commencé à planifier?

  2. Claudio Matarrelli écrit:
    27/11/2009 à 20:07

    En fait, je le fais depuis des années quand j'ai le droit de stimuli .. Comme une après-midi à la maison avec de la fièvre :-)

Laissez un commentaire