Pagina aggiornata... Venerdì, 06 Marzo 2026 * Tempo di caricamento 0.003 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Script_pagina » Testo effetto arcobaleno

..:: Testo con effetto arcobaleno ::..

Uno script che trasforma il testo scritto con un effetto arcobaleno molto carino...



Il codice è molto semplice e permette di personalizzare i colori, la velocità
nella sfumatura e se serve di inserire un link settando anche il cursore, parametro
utile per un messaggio di invito in una specifica pagina

N.B.: Lo script non funziona se nella pagina è presente il doctype

Ecco il codice dello script da inserire sopra il tag </head> della pagina

<script type="text/javascript">
var speed=250; // Velocità effetto, 1 secondo = 1000
var raincol=new Array("#ff0000", "#ff9900", "#ffff00", "#99ff00", "#00ff00", "#00ff99", "#00ffff", "#0099ff", "#0000ff", "#9900ff", "#ff00ff", "#ff0099"); // personalizza i colori
var alink="https://url pagina"; // parametro link (setta alink="" per non inserire link)

/****************************
* Rainbow Text Effect *
*(c) 2003-6 mf2fm web-design*
* http://www.mf2fm.com/rv *
* Non modificare questa parte di codice *

* Tradotto e spiegato da iltelaiodipenelope.it - Tutorial *
****************************/
var rainbow, raintxt, raincnt=0; window.onload=function() { if (document.getElementById) {
var i, raini; rainbow=document.getElementById("rainbow"); raintxt=rainbow.firstChild.nodeValue;
while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]);
for (i=0; i<raintxt.length; i++) {
raini=document.createElement("span");
raini.setAttribute("id", "rain"+i);
raini.appendChild(document.createTextNode(raintxt.charAt(i)));
if (alink) {
raini.style.cursor="pointer";
raini.onclick=function() { top.location.href=alink; }
}
rainbow.appendChild(raini);
}
rainbow=setInterval ("raining()", speed);
}
}
function raining() {
for (var i=0; i<raintxt.length; i++) document.getElementById("rain"+i).style.color=raincol[(i+raincnt)%raincol.length];
raincnt++;
}
</script>

All'inizio del codice troviamo i campi in cui personalizzare, la velocità dell'effetto,
i colori con cui visualizzare il testo e inserire un link, non è possibile impostare
un targhet (_blanck - _self - _partent) quindi la pagina si aprirà nella stessa finestra,
se non occorre mettere un link basta lasciare vuoto il parametro var alink="";
A circa metà del codice, lo vedete evidenziato, c'è il parametro per personalizzare il cursore.

Per la velocità dell'effetto c'è il parametro di riferimento, io ho impostato a 250, fate
delle prove per settarlo come preferite, con i colori ci vuole un po' di pazienza se si vuole
avere un effetto con sfumature ben abbinate, in tutto i colori da settare sono 12...
Se volete sperimentare qui ne trovate un bel po' -> Colori esadecimali

Ed ecco il tag in cui scrivere il testo da postare dove si vuole visualizzare

<span id="rainbow">Testo messaggio</span>

Il messaggio si visualizzerà con l'effetto arcobaleno e con il font impostato nella pagina
se si vuole differente si può scrivere una classe css o in linea nel tag

<span style="font-family: Verdana; font-size: 11px;" id="rainbow">Testo messaggio</span>

Settare i colori per ottenere un effetto gradevole non è semplice ma oltre che "rainbow"
si possono fare delle belle combinazioni da inserire in qualche gadget/accessorio
Un piccolo esempio lo vedete sulla mia fatina autunnale che scrolla nella pagina,
e qui un altro messaggio con una sfumatura autunnale...



# Prelevate qui le parti di codici necessarie


- Codice dello script da inserire tra i tag <head> e </head>




- Tag in cui scrivere il testo




Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


Dai un giudizio a questo tutorial... Grazie ^_^

📄 ✨ Apprezzato
100%
Voti totali: 1
Rating... 5




Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^









I vostri commenti in questa pagina...


ૡPenelope ♥ ~ 30/10/2014 17:26:31
Ciao kuma67 no, mi dispiace ma non si può scrivere una frase su due righe o_O Un abbraccio ♥
kuma67 ~ 27/10/2014 12:11:14
Ciao Penelope,ho provato e riprovato, ma non riesco ad usare l'effetto arcobaleno su più righe.Mi spiego: vorrei scrivere una frase, ma disposta su due righe, sempre con l'effetto arcobaleno.Tu sai se è possibile???Grazie.
word-ok-music.jimdo.com ~ 18/11/2013 19:01:25
Non ho capito.......


~ Pagina visitata da 2588 utenti





Segui il telaio su Facebook

* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥


Basi e utilità pagine web



html tag scrittura pagine web





Script per pagina



Script per gadget




Preleva anche tu una tag Help donna

Aiutami a diffondere il più possibile informazioni
utili alle donne vittime di abusi... Grazie!



Link del telaio...

ೡ Il telaio di Penelope
☆ Template webset e blog
☆ Un sito su AlterVista
☆ Gif & co...





I vostri messaggi...

ૡPenelope ♥ ~ 14/09/2026 22:32:30
Cara Filo d'arianna un po' di anni fa ho realizzato qualche grafica per ForumFree ed era un delirio non so se è ancora così ma la grafica si componeva con decine di piccole immagini, davvero tanto lavoro nemmeno gratificante purtroppo, per quanto riguarda i tutorial, sono una maniaca di html, php e js ma sulla gestione di un forum non saprei da dove partire Un abbraccio forte
ૡScritto in Blogger Kit Autunno
ૡPenelope ♥ ~ 14/09/2026 18:34:20
Carissima Filo d'arianna grazie alla tua segnalazione ho risolto un problema nel commentario purtroppo per evitare spam e messaggi sgradevoli avevo impostato un eccesso nei controlli, ripristinato, ora si può commentare e mettere url del proprio spazio senza problemi grazie infinite cara un abbraccio forte forte
ૡScritto in Home
filod'arianna ~ 14/09/2026 07:41:37
Ciao Penelope! Ho preso il Settimanello micioso:-DL'ho inserito all'interno della sezione "Appunti" sul mio forum, però ho visto che non si può più linkare qui nei messaggi, non riesco a farti vedere dove l'ho inserito. Ad ogni modo il forum è Librandosi tra le pagine, su forumfree. Un abbraccio a presto!
ૡScritto in Home
filod'arianna ~ 12/09/2026 06:52:57
Hai mai pensato di buttarti nel creare grafica e tutorial per ForumFree? 😂 Sto scherzando, ma solo a metà! Sarebbe fantastico. Ne approfitterei immediatamente
ૡScritto in Blogger Kit Autunno
ૡPenelope ♥ ~ 11/09/2026 16:56:26
Carissima Filod'arianna ti ringrazio tantissimo è il più bel complimento che si possa riceve! Un abbraccio forte e viva l'autunno!!!
ૡScritto in Blogger Kit Autunno
filod'arianna ~ 10/09/2026 07:03:48
Adoro il colore di Ortensie vorrei un blog su Blogger solo per i tuoi kit e i tuoi accessori:-D Grazie mille per tutto ciò che metti a disposizione carissima 😘N.B. Anch'io non vedevo l'ora che arrivasse un po' di fresco -.-'
ૡScritto in Blogger Kit Autunno
Cris ~ 02/07/2026 19:45:24
Ciao, sono passata per un salutino e per rivedere il tuo sito. Buona serata e buon fine settimana.
ૡScritto in *Amici del telaio...*
DanyGraphic ~ 30/05/2026 15:30:54
Ciao Penny , sempre belle e interessanti le tue pagine .Un abbraccio e buon fine settimana
ૡScritto in Home
Sabry ~ 26/05/2026 21:34:59
Sei unica ♥️
ૡScritto in Info box
Elise ~ 21/05/2026 17:30:40
Riciao visto com'è brava la nostra Grazia?
ૡScritto in Home