Pagina aggiornata... Lunedì, 22 gennaio 2024 * Tempo di caricamento 0.45 secondi
Link navigazione : Home telaioHome ~ 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 ^_^




80%
Voti totali: 2
Rating... 5





Commentario...

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

Nickname
Home page
B i U   ^_^ o_O O_O *_* Gif...

  


~ Pagina visitata da 2086 utenti


 H: 
Buon Autunno e ...buona domenica!





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 ::..



..:: html ::..





..:: Script page ::..



..:: Script gadget ::..


Accessori e gadget del telaio...


Natale menu

ೡ Istruzioni per prelevare e postare
nel proprio spazio accessori e gadget del telaio

Sito o forum
Blogger-Blogspot

Spazio web...

Realizzare e gestire un sito web
nell'hosting free più famoso...

Un sito su Altervista

Materiale grafico

Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!

Gif & co...




I vostri messaggi...

ೡPenelope ♥
29/11/2025 18:34:13
Grazie a te carissima Marilinc
ೡ Scritto in... Settimanelli natalizi
 
ೡPenelope ♥
29/11/2025 18:30:37
Merci beaucoup chère Maleah, vous trouverez ici des modèles prêts à l'emploi pour Blogspot [Link] e ne peux pas réaliser de travaux sur commande, désolé
ೡ Scritto in... html e script Tutorial...
 
MARILINC
29/11/2025 08:59:51
Grazie infinite meravigliosi c'è solo l'imbarazzo della scelta!
ೡ Scritto in... Settimanelli natalizi
 
Maleah
26/11/2025 13:58:21
Bonjour de France,Je viens de découvrir ton superbe blog et suis très admirative pour l'excellent travail que tu fais.Je ne sais pas si tu acceptes de modifier des blogspots et tente ma demande d'aide :Je suis une créatrice depuis des années déjà mais j'avoue je suis NULLE quant à la mise en place " design" de mon blog.Accepterais-tu de me réaliser un design pour Noël ?Cela me comblerait de joie, mais si tu ne peux pas je comprendrais parfaitement ta décision.Merci de ta réponse & encore UN IMMENSE BRAVO pour tes diverses créations.Amitié virtuelle.Maleah-Sunsunmaleah@gmail.com
ೡ Scritto in... html e script Tutorial...
 
ೡPenelope ♥
13/11/2025 20:28:01
Grazie infinite cara Dany
ೡ Scritto in... Romantici vintage
 
DanyGraphic
12/11/2025 22:56:52
Ciao Penelope i template sono carinissimi come tutti i tuoi lavori d'altra parte. Ti faccio tanti complimenti. Un abbraccio grande, dolce ♥♥
ೡ Scritto in... Romantici vintage
 
ೡPenelope ♥
12/11/2025 22:27:17
Ciao Elżbieta ti ringrazio per il complimento, per la traduzione puoi usare Google Un abbraccio
ೡ Scritto in... Home
 
Elżbieta
05/11/2025 14:28:32
Wizualnie podoba mi się Twój blog, ale nie wiem jak włączyć tłumaczenie. Pozdrawiam
ೡ Scritto in... Home
 
Veronica
01/11/2025 16:58:42
Preso un tuo adottino x il mio blog
ೡ Scritto in... Home
 
Karla "SEyez"
28/10/2025 14:50:44
Bellísima!
ೡ Scritto in... Banner link del telaio ^_^