10 dicembre 2011

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://lh3.googleusercontent.com/-Hq5s8G0UP_U/TuNYrkup-RI/AAAAAAAAVtg/HqjUbOvLMK4/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://lh6.googleusercontent.com/-0gTZSr22MEs/TuNZbTNd-hI/AAAAAAAAVto/XNXC1qZ4rUk/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

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

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.




6 commenti:

  1. Bellissimo l'effetto nevicata con stella cadente ....... ho già messo un'altro effetto java sul mio blog ....... la mia domanda per chi gestisce questo interessante Blog è si possono unire i due effetti - mettendo sullo stesso Blog due effetti diversi - quello che ho io e questo ?
    Io immagino di no ....... ma vorrei avere una risposta da chi se ne intende più di me

    RispondiElimina
  2. @Arwen
    Dal punto di vista tecnico non ci sono problemi e puoi inserirli entrambi. Probabilmente però questo effetto coprirà un po' quell'altro. Volendo puoi mettere solo la stella cadente se hai già la nevicata.

    RispondiElimina
  3. Ciao Ernesto e grazie per la tua risposta velocissima - devo dire che ho provato a mettere entrambi ma qualcosa non andava rallentava tutto visto che la mia è una cuduta di oggettini natalizi ... la stella finiva nella prarte sx libera del blog sotto gli altri oggetti Java presenti - strano - riprovo a poi ti dico ....
    Grazie ancora sul tuo Blog c'è un gran Ben di Dio hi hi hi!

    RispondiElimina
  4. Per ora ho messo la stella ma avrei preferito i due babbi natale che hai messo nella demo dell'effetto nevicata ... non è possibile avere i codici ?!

    Buona fine di serata e Buona domenica

    RispondiElimina
  5. Scusa se la domanda non ha molto a che vedere con l'argomento.. ma c'è un modo per mettere a lato di un blog un post dove si possono aggiungere dei commenti? Tipo un Guestbook dove però chiunque può commentare senza iscriversi. Grazie...

    RispondiElimina
  6. @Giuseppe
    Ho già riposto alla tua domanda in un altro commento. Credo che una soluzione valida sia quella della chat

    @Arwen
    Le slitte di Babbo Natale le ho testate e domani mattina, se ho tempo e voglia, ci faccio un post, quindi basta pazientare un po' ;)

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.