Come inserire la neve e la stella cadente nel blog per le Feste di Natale.

Ho già presentato degli effetti che mostrano la neve che cade nel blog. Si trattava però di javascript che potevano non funzionare su alcuni modelli. Ricordo l'Effetto Nevicata che pubblicai circa un anno fa e l'Effetto di Oggetti Natalizi che cadono pubblicato da poco. Vediamo come si possano creare delle suggestive nevicate, ma non solo, utilizzando il tag <marquee> che ho già usato per presentare le scritte scorrevoli. Consideriamo per esempio questo codice

<marquee behavior="scroll" direction="down" style="position: absolute; left: 150px; top: 0px; width: 14px; height: 800px;" scrollamount="5"><span style="color: #ffffff;">*</span></marquee>

Si tratta di un fiocco di neve che cade. Il fiocco di neve è rappresentato da un asterisco ( * ), la direzione di caduta è data da down, la posizione da cui cade il fiocco è in alto (top: 0px;) spostata di 150px sulla sinistra, tutta la caduta dura 800 pixel e la velocità è data da scrollamount="5" (a numeri più alti corrisponde una maggiore velocità). Al posto del fiocco di colore bianco (color: #ffffff;) ci possiamo mettere una immagine in modo tale che il codice diventi

<marquee behavior="scroll" direction="down" style="position: absolute; left: 150px; top: 0px; width: 16px; height: 800px;" scrollamount="5"><span style="color: #ffffff;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV6601FoKg7rGobx451ttYoe91jezezB-Dr1qUsNZkykSvkrZeNBx3sk-_c_q70l3Cg2UmupV9B9qi9LsSXQt-cWWJ3y3NPUO9dBtoRllRG5ekkqeP6-W0UOw02t3Q5VfgyB2cX4Q8MC8/s16/stella3.png"/></span></marquee>

Dove al posto dell'asterisco, è stato inserito un tag <img src="URL IMMAGINE"/>. In questo contesto ha una sua rilevanza anche il parametro width: 16px; che serve per configurare la larghezza dell'immagine che invece è pleonastico nel caso dell'inserimento del solo asterisco.

L'idea è quella di creare tanti fiocchi che cadono partendo da diverse posizioni configurando top e left con valori diversi. Possiamo anche fare in modo che un fiocco scompaia dopo poco (height:200px) oppure che la sua caduta sia più lunga (height:1000px). Possiamo inoltre far cadere fiocchi di colori diversi modificando il parametro (color: #ffffff;). Dobbiamo quindi creare un codice per ogni fiocco.

Per rendere la cosa anche più carina è possibile inserire altri oggetti che si muovono. E' il caso per esempio di una stella cadente con la scritta Felice Natale

<marquee direction="left" style="position: relative; right: 0px; top: 150px; height: 70px;" scrollamount="3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfjAY756r64F7aRwjrYOX8ULwfpSDjapz1U8nuGsXRH6dW9y0FxLXkQEqhysaOfBEahVxfsae5ySGzGRujJbQJqNfUVYBsTOtjmPKJb6nRkw-UX4iqjHwvWSOpHzfqGMPIge21iD_qyK0/s100/felicenatale.gif"/><span style="color: #FFB800; font-size: 20px; font-weight: bold;">FELICE NATALE</span></marquee>

Ecco un esempio di codice che rappresenta un insieme di fiocchi bianchi, immagini di fiocchi colorati e una stella cadente

• Codice effetto nevicata con stella cadente -

Può essere personalizzato a piacere seguendo le indicazioni di questo articolo. Per metterlo nel blog si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito. Successivamente con il mouse si posiziona sopra l'area del post (opzionale). Ho anche pubblicato una

• Demo della neve che cade con stella cadente -

E' evidente che nei blog a sfondo bianco i fiocchi non saranno visibili a meno che non si cambi il colore di ciascuno di essi. Una controindicazione di questo metodo è che per tutta la caduta della neve sia difficile cliccare sui collegamenti eventualmente presenti nella pagina perché lo spazio è occupato dagli oggetti marquee. E' quindi adatto a blog che abbiano una intestazione molto ampia. Volendo però si possono diminuire le dimensioni della lunghezza della caduta dei fiocchi oppure inserire l'effetto solo in particolari pagine usando i tag condizionali. Concludo ricordando che chi non è interessato alla nevicata può comunque utilizzare il codice della stella cadente che, se non modificato, la farà muovere da destra verso sinistra.