Pagina aggiornata... Lunedì, 22 gennaio 2024 * Tempo di caricamento 0.84 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 ^_^
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 1677 utenti


 H: 
Buon Inverno !





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


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 ♥
18/02/2025 20:27:41
Dear Pinalie thank you so much, I couldn't leave a message in your space, a big hug ♥
ೡ Scritto in... Orsetti...
 
ೡPenelope ♥
18/02/2025 20:16:52
Cara Filo d'arianna ti ringrazio tanto, fammi sapere quando avrai un tuo spazio così da poter ricambiare, una abbraccio forte ♥
ೡ Scritto in... Banner link del telaio ^_^
 
Antonella
13/02/2025 01:00:16
ciao Penelope ho prelevato uno dei tuoi almanacchi e l'ho inserito nel mio blog.Complimenti per il tuo sito sempre ricco e interessante.[Link]
ೡ Scritto in... Almanacco soft
 
Vale
02/02/2025 06:15:22
carinissimi!!♥
ೡ Scritto in... Mini cursori
 
Pinalie
19/01/2025 22:47:05
Deer Penelope i love and instal your sweet little bear Date Time on my pageThank you so much for your work
ೡ Scritto in... Orsetti...
 
filod'arianna
19/01/2025 11:51:50
Ciao:-), ho prelevato un banner 88x31 e l'ho inserito nella mia firma. Per ora non ho uno spazio adatto da inserirlo in homepage, ma non escludo che in futuro lo inserirò! Grazie di cuore per il materiale messo a disposizione
ೡ Scritto in... Banner link del telaio ^_^
 
DanyGraphic
24/12/2024 13:03:33
Tanti cari Auguri di Buone Feste e un sereno 2025 . Un abbraccio virtuale da parte mia
ೡ Scritto in... Home
 
Maria
23/12/2024 22:46:14
Sono bellissimi i tuoi datari con saluto. Grazie mille !
ೡ Scritto in... Snow...
 
Cleo
16/11/2024 07:46:27
ciao tesoro ti auguro un buon week end
ೡ Scritto in... Home
 
Angel
17/10/2024 16:24:12
Mi perdo a guardare il tuo Telaio.. è bello, con tante cosine che mi mandano in estasi.. e me le porto via.. Sei brava! Ciao, auguroni di ogni bene.
ೡ Scritto in... Settimanelli... Una gif per ogni giorno della settimana