15 febbraio 2010

Come inserire effetti speciali floreali nel blog (cascate di fiori e scie di corolle) .

Mi è stato chiesto in un commento se fosse stato possibile inserire nel blog effetti di cascate di fiori o scie floreali. Basandomi sui noti script di Dynamic Drive mi sono limitato a inserire gli URL delle immagini che ho caricato su Skydrive. Ho scelto delle immagini animate in formato GIF ma, volendo, possiamo inserirne anche di statiche, di diverse dimensioni e di altri formati. Ho preparato tre effetti che sono installabili copiando i seguenti codici
<script src="http://sites.google.com/site/ideepercomputeredinternet/fiori/fiore.js" type="text/javascript"/></script>

Lo script precedente produce una cascata di fiori che hanno questa forma  e che può essere osservata in una demo di cascata floreale. Un'alternativa è una pioggia di lilium che aprono la corolla. Ecco il suo codice

<script src="http://sites.google.com/site/ideepercomputeredinternet/fiori/liliumgrande.js" type="text/javascript"/></script>

che produce un effetto di pioggia di fiori di questo aspetto   e che può essere osservato in questo post demo di lilium.
Se volete qualcosa di diverso ecco una scia floreale che viene creata mentre si sposta il mouse. Il codice relativo è questo
<script src="http://sites.google.com/site/ideepercomputeredinternet/fiori/misto34.js" type="text/javascript"/></script>

e le immagini dei fiori sono rispettivamente questa fiore-animato  e quest'altra lilium . Per una demo potete guardare la scia di fiori del mio blog di prova.
Questi effetti sono analoghi a quelli che ho usato per l'effetto della neve che cade e quello dei cuoricini animati per San Valentino. 
Per l'installazione, se avete Blogger, andate su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollate il codice in Sezioni del sito mentre lasciate in bianco il Titolo del widget. Dopo aver salvato, cercate di posizionare l'elemento in alto e in una posizione centrale; funziona comunque anche se inserito in una sidebar.
Nei primi due casi l'effetto sarà maggiore all'apertura nella pagina e quando la si scorre. I più esperti potranno anche scaricare gli script e modificare a piacimento alcuni parametri come il massimo numero di immagini, la durata delle immagini, la larghezza e l'altezza dell'effetto, la distanza tra le singole immagini e, cosa più importante, sostituire a quelle che ho inserito altre più gradite. E' cosa di due minuti.



15 commenti:

  1. Ciao Parsifal, interessantissimoo e pieno di risorse il tuo sito; mi potresti dire se si possono anche inserire questi effetti nei post?
    Sono un po' una neofita, non ne capisco granche'.
    Grazie e buon lavoro

    RispondiElimina
  2. @dede
    questi effetti si possono inserire nel blog, anche in una sola pagina del blog ma in tutto il blog, sidebar e header compresi non solo nel post.
    Per inserirli in una sola pagina ti puoi leggere le istruzioni di questo articolo
    http://parsifal32.blogspot.com/2009/12/come-inserire-un-widget-solo-in-una.html
    Ciao
    P.S Siamo stati tutti neofiti. Io ho iniziato due anni fa e neppure sapevo cosa era l'HTML!!!

    RispondiElimina
  3. Grazie, non c'ero mai riuscita!

    RispondiElimina
  4. Innamorati del 3D? Interessati agli effetti speciali? La Facoltà di Scienze MM.FF.NN. ha organzzato la conferenza
    "Production and Visual Effects" dedicata ai processi di produzione e postproduzione di un film.
    Tutto il servizio al link:
    http://www.uniroma.tv/?id_video=15948


    Ufficio Stampa di Uniroma.TV
    info@uniroma.tv
    http://www.uniroma.tv

    RispondiElimina
  5. Ciao,
    Sto cambiando il look del mio blog, precedentemente avevo usato la cascataq di fiori che hai qui, ma ora, con lo stile che ho imposto (avatar) , mi sono creata l'immagine di quei affarini bianchi che svolazzano di notte, che si vedevano nel fim, e mi domandavo, se hai qualche tutorial che crearne una cascata, cioè al posto dei fiori, questi che ho creato io, cioè ritagliato dall'immagine. Sarebbe proprio una favola se potessi inserire questa cascata avatarata. grazie.

    RispondiElimina
  6. @Etoile E' semplicissimo. Copia nella barra del browser questo URL
    http://sites.google.com/site/ideepercomputeredinternet/fiori/fiore.js?attredirects=0&d=1
    Premi su Invio e scaricherai il file javascript dell'effetto.
    Installa il programma Notepad++
    http://www.ideepercomputeredinternet.com/2009/12/notepad-per-modificare-modelli.html
    Carica su Picasa l'immagine che vuoi avere come cascata e acquisiscine l'URL diretto.
    Con Notepad++ apri il file fiore.js che hai appena scaricato.
    Si tratta di un codice. Troverai l'URL dell'immagine del fiore che è questo
    http://3zubng.blu.livefilestore.com/y1p39H9XLNkfkFyU9cxwyAEsXUmjm0euSAXfo_4E6uxWo0TbJ7EaTJazUjHc7QlQroHXCO9L-0bR5sybo0n58de81vWwfCC9CwH/fiore.gif
    Sostituiscilo con quello della tua immagine e salva il file javascript.
    Questo file, che puoi chiamare per esempio avatar.js, lo dovrai caricare su Google Sites secondo questa procedura
    http://www.ideepercomputeredinternet.com/2010/05/come-caricare-file-javascript-e-css-su.html
    Dopo averne ottenuto l'indirizzo, lo sostituirai nel codice di questo post. Non ti resta che installare lo script con le stesse modalità dell'articolo.

    RispondiElimina
  7. @Etoile
    Dimenticavo che l'immagine dovrà essere all'incirca 30x30 pixel, meglio se in formato PNG con sfondo trasparente

    RispondiElimina
  8. E' utilissimo ciò che scrivi e soprattutto comprensibilissimo anche per sprovvedute informatiche come me!
    Ho una domanda... vorrei inserire la scia di fiorellini che seguono il mouse.. non però un blog, ma un sito.. ho copiato il codice sopra, ma non è successo niente... come devo fare?

    GRAZIEEEEEEEEEEEEEEEEEE!! :-)

    RispondiElimina
  9. @jade
    Non so che genere di sito sia. Comunque il concetto è quello di incollarlo in modalità HTML. Se hai la possibilità di accedere all'HTML del sito basta inserire il codice dopo <body> e prima di </body>

    RispondiElimina
  10. ciao scusa se ti disturbo ,volevo chiederti ma come si fa a creare la pagina di google sites,ho provato seguendo l'esempio sopra che hai descritto per Etoile ma non riesco ad andare avanti perchè a me si aprono pagine diverse da quelle che si vedono nel tuo esempio,volevo farlo perchè volevo appunto cambiare i fiori della cascata con dei fantasmini per usarli ora che viene halloween,ma mi blocco alla prima pagina dove devo creare il sito,poi
    dal secondo esempio in poi è tutto diverso.forse sbaglio qualcosa ma non riesco a capire cosa visto che sto seguendo alla lettera quello che tu hai scritto. se puoi aiutarmi a farlo te ne sarei grata,grazie ciao Franca

    RispondiElimina
  11. @Franca
    Non penso sia possibile inserire del javascript su Google Sites. La grafica è cambiata molto è non ho un tutorial recente :(

    RispondiElimina
  12. allora dovrò aspettare che crei un nuovo tutorial,peccato che questo non funzioni più era perfetto,grazie comunque,
    ciao, Franca

    RispondiElimina
  13. @Franca
    Se non funziona più allora è un'altra cosa. Mi parlavi di Google Sites...
    Vedrò quello che posso fare :)

    RispondiElimina
  14. @Franca
    Ho messo a posto lo script. Adesso dovrebbe funzionare. Cerca di metterlo in un elemento pagina in una posizione centrale.

    RispondiElimina
  15. uuuuh bellissimo!!!! ho preso la scia per il cursore ma la scelta è stata molto ardua. grazie mille!!! passerò di nuovo molto presto!!! buona serata

    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.