Sezione del telaio dedicata alla realizzazione e
personalizzazione di pagine web, tutorial e guide per utilità, accessori e gadget
con tanti script utili e originali...
Pagina aggiornata... Lunedì, 22 gennaio 2024 *
Tempo di caricamento
0.78
secondi Link navigazione :Home telaio ೡ Home ~ Tutorial ~ Script_pagina » Testo effetto oscillante
..:: Testo effetto oscillante... ::..
Uno script per scrivere titoli o brevi messaggi svolazzanti...
Benvenuti nel telaio...
Il codice è molto semplice, i parametri che si possono personalizzare sono tre,
velocità e altezza dell'oscillazione ed è possibile inserire un link
Ecco il codice dello script da inserire sopra il tag </head> della pagina
<script type="text/javascript">
var speed=150; // Velocità oscillazione
var height=1; // Altezza oscillazione
var alink=""; // parametro link (setta alink="" per non inserire link)
/****************************
* Wobbly Text Effect *
*(c) 2003-6 mf2fm web-design*
* http://www.mf2fm.com/rv *
* Non modificare questa parte di codice *
* Tradotto e spiegato da https://www.iltelaiodipenelope.it/tutorial/index.php *
****************************/
var wobtxt, wobble, wobcnt=0; window.onload=function() { if (document.getElementById) {
var i, wobli; wobble=document.getElementById("wobble"); wobtxt=wobble.firstChild.nodeValue;
while (wobble.childNodes.length) wobble.removeChild(wobble.childNodes[0]);
for (i=0; i<wobtxt.length; i++) {
wobli=document.createElement("span");
wobli.setAttribute("id", "wobb"+i);
wobli.style.position="relative";
wobli.appendChild(document.createTextNode(wobtxt.charAt(i)));
if (alink) {
wobli.style.cursor="pointer";
wobli.onclick=function() { top.location.href=alink; }
}
wobble.appendChild(wobli);
}
setInterval("wobbler()", speed);
}}
function wobbler() {
for (var i=0; i<wobtxt.length; i++) document.getElementById("wobb"+i).style.top=Math.round(height*Math.sin(i+wobcnt))+"px"
wobcnt++;
}
</script>
All'inizio del codice troviamo i campi in cui personalizzare velocità e altezza
dell'effetto oscillazione del testo, fate delle prove per capire come volete che si visualizzi,
considerando sopratutto se vi serve per un titolo o un breve messaggio, nel terzo campo
si può inserire un url per un link così: https://www.iltelaiodipenelope.it
Ed ecco il tag in cui scrivere il testo da postare dove si vuole visualizzare
<div id="wobble">Titolo/messaggio</div>
Il titolo o il messaggio si visualizzeranno con lo style della pagina se si vuole
differente si può scrivere una classe css o lo style in linea
E' possibile inserire il tag del testo nel marquee e l'effetto è davvero simpatico...
N.B.: Se volete fare delle prove con le immagini vi avviso che si possono far
visualizzare solo sotto o sopra il testo, inserendo il tag in questi modi:
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 ♥
Ciao Penelope ! Torno qui per prelevare un banner 88x31, lo inserisco nel mio forum, si troverà nello spazio "Amici non affiliati" dopo le sezioni, in fondo al forum. Ho inserito anche l'iniziativa "Help Donna" che si troverà sempre dopo le sezioni, nello spazio a lei dedicatole.Un abbraccio, a presto:-)Il mio forum[Link]
Buongiorno cara Penny, eccomi qui a lasciarti un carissimo saluto ed a ringraziarti della tua carinissima visita nel sito grafico ^_^ Ti lascio un forte abbraccio e sempre complimenti di cuore 💓
Tesoro buon giorno come stai?? scusa se ti disturbo volevo saperese a te Ws ftp funziona per salvare tutto sul sito altervista a me non sta funzionando piu io ho winws10 tu cosa utilizzi mi puoi aiutare appena apro wstp si chiude non sto riuscendo a pubblicare grazie in anticipo un abbraccio e buona settimana santa tesoro
Ciao Penny, sono passata a lasciarti un salutino di buona domenica ed anche a ringraziarti per aver inserito il mio bannerino. Un abbraccio forte ed alla prossima :) Ciaooo