Testo che si zummi lettera per lettera

**balbo75** · 06-04-2006, 09:43

Ciao a tutti,
Vorrei inserire nella mia home page, il titolo del sito che però il testo zummi la prima lettera per poi ritornare alle dimensioni originali per lasciare che zummi la seconda che a sua volta torni alle dimensioni originali per lasciar posto alla terza e così via...
Un grazie del supporto

**Vincent.Zeno** · 06-04-2006, 09:44

Credo tu debba realizzare un filmato in flash....

**cxrnvs** · 06-04-2006, 09:47

se ho capito bene vuoi un titolo che faccia piu' o meno cosi'

Titolo

tItolo

tiTolo

titOlo

titoLo

titolO

(la lettera "zummata" ovviamente e' quella maiuscola)

in sequenza?

se e' cosi' io lo farei con una semplice animazione in flash.

**Mich_** · 06-04-2006, 10:41

Si puo` realizzare anche con i CSS.
Facilissimo per i browser standard:

codice:

HTML:
<span class="zoom">T</span><span class="zoom">i</span><span class="zoom">t</span><span class="zoom">o</span><span class="zoom">l</span><span class="zoom">o</span>

CSS:
.zoom       { font-size: 1em; }
.zoom:hover { font-size: 2em; }

Per IE occorre che ciascun carattere sia un link indipendente:

codice:

HTML:
Ti...

CSS:

a.zoom       { font-size: 1em; text-decoration:none; }
a.zoom:hover { font-size: 2em; text-decoration:none; }

**balbo75** · 06-04-2006, 10:59

Vi ringrazio già ora, ma purtroppo non sono capace di farlo ne con i css ne con l'html....
Sono un webmaster in erba....
é per fare un piacere ad un amico che desidera questo effetto....
Per quanto riguarda il flash..... Non ne vengo fuori
Intanto grazie

**cxrnvs** · 06-04-2006, 11:00

ma cosi' lo zoom si vede solo al passaggio del mouse.

a me sembra che lui voglia un'animazione indipendente dal mouse

**nuky** · 06-04-2006, 11:08

Questa può essere una bozza. Poi bisogna sistemare il layout in modo che non sfalsi.
Inoltre si può modificare per fare avanti e indietro se serve.

codice:

<html>
  <head>
    <style type="text/css">
      h1 {display:inline;}
    </style>

    <script type="text/javascript">
      var objTitolo;
      var testo;
      var posZoom = -1;
      var intervallo;
      
      function zummalo() {
        objTitolo = document.getElementById("idTitolo");
        testo = objTitolo.innerText.replace(/\s+$|^\s+/g,""); //testo trimmato
        intervallo = setInterval("zoomLettera()", 500);
      }
      
      function zoomLettera() {
        var zoomStr = " ";

        do {
          posZoom += 1;
          zoomStr  = testo.charAt(posZoom);
        } while (zoomStr == " "); //Si saltano gli spazi

        var leftStr  = testo.substring(0, posZoom);
        var rightStr = testo.substring(posZoom + 1);
        
        objTitolo.innerHTML = leftStr + "<h1>" + zoomStr + "</h1>" + rightStr;
        
        if (posZoom == testo.length) clearInterval(intervallo);
      }
    </script>
  </head>
  
  <body onload="zummalo();">
    <h3 id="idTitolo">PROVA ZOOM</h3>
  </body>
</html>

**Mich_** · 06-04-2006, 11:08

Originariamente inviato da cxrnvs
ma cosi' lo zoom si vede solo al passaggio del mouse.

a me sembra che lui voglia un'animazione indipendente dal mouse

Rileggendo la domanda, mi rendo conto che e` una interpretazione possibile/probabile (io avevo interpretato diversamente).

Comunque l'idea e` valida lo stesso, solo che occorrono modifiche ed un pizzico di JS.

Aspettiamo l'interpretazione "autentica" (sperando che dia info chiare su cosa vuole).

**balbo75** · 06-04-2006, 11:15

Perfetto, così va strabene, ora mi piacerebbe che fosse ciclico......

**fcaldera** · 06-04-2006, 11:25

cambia

if (posZoom == testo.length) clearInterval(intervallo);

in

if (posZoom == testo.length) posZoom = 0;

e sostituisci innerText con innerHTML (riga 15) altrimenti con firefox non funziona

Discussione: Testo che si zummi lettera per lettera

Strumenti discussione

Ricerca discussione

Visualizza

Testo che si zummi lettera per lettera

Permessi di invio