Pagina aggiornata... Venerdì, 06 Marzo 2026 * Tempo di caricamento 0.003 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

* Esempio classe css

<style type="text/css">
div.testo {
text-align: center;
font-family: "Georgia";
color : #b55a2a;
font-size : 14px;
}
</style>		 <div class="testo" id="wobble"></div>

* Esempio style in linea (Sconsigliato, si pasticciano le pagine)

<div style="text-align: center; font-family: Georgia; color:#b55a2a; font-size: 14px;" id="wobble"></div>

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:

* Marquee con immagine sopra

<marquee><img src="url immagine"><div id="wobble">Testo</div></marquee>

* Marquee con immagine sotto

<marquee><div id="wobble">Testo</div><img src="url immagine"></marquee>

# Prelevate qui le parti di codici necessarie


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




- Tag in cui scrivere e visualizzare 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 ^_^

📄 🌸 Nuovo
0%
Voti totali: 0
Rating... 0




Commentario...

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









~ Pagina visitata da 1441 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...

Sabry ~ 10/03/2026 11:39:07
Io ti adoro ... vorrei tanto essere brava come te, ti seguo da anni e rimango sempre affascinata dalla tua astuzia e bravura e creativitá ♥ Prendo spunti ♥ Grazie di ♥
ૡScritto in Sfondo pagina
Gabriella ~ 09/03/2026 18:37:40
Ciao Penny, come sempre i tuoi lavori sono molto eleganti ,ne ho prelevato due per adesso ;) grazie
ૡScritto in Decori pagine Primavera
soleyada ~ 07/03/2026 22:02:27
Mi hai fatto tornare indietro nel tempo cara Penny, non smettere mai di splendere, è tutto stupendo qui, ti auguro il meglio, bacioni :-*
ૡScritto in Countdown Primavera
Cris ~ 24/02/2026 08:17:18
Ciao, e bentornata. Mi è sempre piaciuto il tuo bel sito. Ho creato da poco un blog, il tuo sito è il primo tra i miei preferiti.
ૡScritto in Home
MOra Ribelle ~ 16/02/2026 12:05:35
Buongiorno, contenta del tuo ritorno. Mi domando come metto anche io questo box saluti? grazie
ૡScritto in Gif & co...
Sari ~ 14/01/2026 17:31:32
Buon Anno Penelope. Ho prelevato un top pagina sostituendo quello natalizio. Tutto bello e utile qui, grazie.
ૡScritto in Marquee con Javascript
Frann ~ 25/12/2025 15:09:37
Cara amica Penelope, ti auguro un Natale, con pace, amore e tanta gioia. Bacione ~ Frann
ૡScritto in Home
filod'arianna ~ 24/12/2025 08:50:20
Auguri di buon Natale Penelope, e a tutti i visitatori del Telaio 🎄✨😃
ૡScritto in Home
Sari ~ 18/12/2025 22:01:59
Ciao Penelope, ti seguo da anni e tanto ho imparato dalle tue lezioni: grazie. Ti auguro un Natale sereno e, nonostante i tempi che stiamo vivendo, in allegria. Buon Natale
ૡScritto in Home
filod'arianna ~ 14/12/2025 09:32:05
Ciao Penelope, ho preso un countdown Grazie mille per averli messi a disposizione, sono deliziosi! Ne userò più d'uno sicuramente:-)
ૡScritto in Countdown stagioni e feste