Effetto lente su testo

  • Creatore Discussione Creatore Discussione peoweb
  • Data di inizio Data di inizio

peoweb

Nuovo Utente
23 Gen 2013
9
0
1
Ciao a tutti,
spero di essere nel forum giusto ma onestamente non so con cosa fare ciò che cerco,
ho il testo "ENERGIA" e devo trovare il modo di ingrandirlo 1 o 2 lettere per volta da sinistra a destra come se ci passasse sopra una lente di ingrandimento.
Attenzione la "lente" deve essere invisibile, non devo vedere la lente, voglio solo le lettere che si ingrandiscono.
L'effetto deve partire una tantum dopo il caricamento della pagina in automatico.
Finora ho trovato script probabilmente più complessi che mi permettono di zoomare parti di immagini o di testi in base al clic e al movimento del mouse.
A me basterebbe lo facesse in automatico da solo una volta, stop.
Al massimo va bene se si attiva al mouseover ma non deve essere una risposta ad un'azione volontaria dell'utente.
Qualcuno può aiutarmi?
 
Ciao, potresti provare con un codice tipo questo
Codice:
<script type="text/javascript">
    var scritta = "ENERGIA";
    var x = 0;
    function scriviTesto() {
        var scrivi = "";
        for(var i in scritta) {
            if(x==i) {
                scrivi += "<span class='big'>";
            }
            scrivi += scritta[i];
            if(x==i) {
                scrivi += "</span>";
            }
        }
        document.getElementById("scritta").innerHTML = scrivi;
        if(x<=scritta.length) {            
            x++;
            setTimeout(function(){
                scriviTesto();
            },150);
        }else{
            x=0;
            setTimeout(function(){
                scriviTesto();
            },1250);
        }        
    }           
    window.onload = function(){
        scriviTesto();
    }
</script>
<style type="text/css">
    #scritta {
        width: 300px;
        height:32px;
        line-height: 32px;
        text-align: center;
        border: 1px solid blue;
        font-size: 1.9em;
        letter-spacing: 3px;
        font-family: Courier;
    }
    #scritta span.big {
        font-weight: bold;        
    }
</style>
<div id="scritta"></div>
Non ci ho pensato molto quindi è sicuramente da sistemare
 

Discussioni simili