Help domanda brevissima sull'header

**LorenzoGiannoni** · 16-11-2014, 16:35

Salve a tutti, vorrei che mi aiutaste a risolvere questa mia ignoranza:
Nel sito web che ho in mente di fare vorrei mettere un titolo nell'header composto di due frasi, in modo tale che all'apertura della pagina appaia la prima, poi dopo un tot di secondi scompaia in dissolvenza e faccia comparire la seconda (sempre in dissolvenza), poi dopo lo stesso tot. di secondi ricompaia la prima con le modalità precedenti. Esiste un modo per farlo?

**Tonenge** · 18-11-2014, 00:30

Ciao Lorenzo,
sperando di aver interpretato correttamente la tua domanda, ho scritto una "brevissima" funzione:

codice:

<!DOCTYPE>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Fade Header</title>
<script>

T=3;                   // secondi durata dissolvenza

window.onload=Fade;

function Fade(o,i){
  if(!i) i=0; i++; i&=3;   
  o=o?0:1;     
  
  tx=["Header frase 1", "Secondo Testo 2"];            // Frasi che si alternano
  
  var j=document.getElementById("id_header");
  j.innerHTML=tx[parseInt(i/2)];
  j.style.opacity=o;
  j.style.transition="opacity "+T+"s";
  
setTimeout("Fade("+o+","+i+")",1000*T);
}


</script>  
  </head>
  <body>

<div id="id_header" style='font:bold 32px Arial;'></div>

  </body>
</html>

**fcaldera** · 18-11-2014, 13:16

oltre che con javascript puoi ottenere lo stesso effetto anche attraverso animazioni css3

**tampertools** · 18-11-2014, 17:17

http://jsfiddle.net/rpuefzh2/embedded/result,html,css/

Un esempio con soli css

@tonenge
Secondo me anziché

codice:

setTimeout("Fade("+o+","+i+")",1000*T);

è meglio

codice:

setTimeout(Fade.bind(this, o, i), 1000*T);

In quanto passando una stringa alla funzione setTImeout è come usare eval()

E se ci tieni a risparmiare sui byte (come mi sembra di vedere, soprattutto dai nomi che dai alle variabili

) puoi sostituire

codice:

o=o?0:1;

con

codice:

o=+!!o;

: Un byte in meno! (In realtà mi piace perché è "criptico"

)

**Tonenge** · 18-11-2014, 21:49

Ciao a tutti,
concordo con l'evidenza che la soluzione css3 alla domanda di Lorenzo sia più "pulita".

@tampertools
in realtà si risparmiano 2 caratteri perché hai scritto una negazione di troppo:

codice:

o=+!!o; 
o=+!o;   // corretta

Complimenti! le considerazioni sui nomi delle variabili ed il codice criptico sono esatte

(programmavo in linguaggio macchina...)

Però se avessi veramente voluto risparmiare avrei anche scritto:

codice:

i=i||0;    // al posto di  if(!i) i=0;
i>>1       // al posto di  parseInt(i/2)

Infine per l'eval nel "setTimeout" non sono pienamente d'accordo perché su vecchi browsers (es. ie7)
la nuova sintassi non solo non funziona ma blocca lo script.

Ma è anche vero che siamo nel forum HTML5!

Saluti

**tampertools** · 18-11-2014, 23:44

Ups, hai ragione

con quel ! in più sarebbe l'equivalente di

codice:

o=o?1:0;

E poi, anziché la riga dell'if: (credo)

codice:

i=i?i+1&3:1;

Riguardo al setTimeout:

codice:

setTimeout(function () {
    Fade(o, i);
}, 1000*T);

Compatibile ovunque e senza l'eval

**Tonenge** · 19-11-2014, 11:14

Hai la mia stima!

**riccardomancini** · 20-11-2014, 22:37

Originariamente inviata da Tonenge

Ciao Lorenzo,
sperando di aver interpretato correttamente la tua domanda, ho scritto una "brevissima" funzione:

codice:

<!DOCTYPE>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Fade Header</title>
<script>

T=3;                   // secondi durata dissolvenza

window.onload=Fade;

function Fade(o,i){
  if(!i) i=0; i++; i&=3;   
  o=o?0:1;     
  
  tx=["Header frase 1", "Secondo Testo 2"];            // Frasi che si alternano
  
  var j=document.getElementById("id_header");
  j.innerHTML=tx[parseInt(i/2)];
  j.style.opacity=o;
  j.style.transition="opacity "+T+"s";
  
setTimeout("Fade("+o+","+i+")",1000*T);
}


</script>  
  </head>
  <body>

<div id="id_header" style='font:bold 32px Arial;'></div>

  </body>
</html>

Ed' invece per aggiungere più di 2 frasi che si alterneranno? Io ho provato ad'aggiungere più frasi all'interno del tx e cambiare il parseInt(i/2) in parseInt(i) ma il risultato non è fluido come con i primi due, come posso fare?

**LorenzoGiannoni** · 21-11-2014, 00:09

Originariamente inviata da riccardomancini

Ed' invece per aggiungere più di 2 frasi che si alterneranno? Io ho provato ad'aggiungere più frasi all'interno del tx e cambiare il parseInt(i/2) in parseInt(i) ma il risultato non è fluido come con i primi due, come posso fare?

Studi e te lo fai

**Tonenge** · 21-11-2014, 10:40

Ciao riccardomancini,
benvenuto nel forum,
ho modificato lo script in modo che puoi aggiungere e togliere frasi nella variabile "tx".

Saluti

codice:

<!DOCTYPE>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Fade Header</title>
<script>



T=3;                               // secondi durata dissolvenza
tx=["Header frase 1",             // Frasi che si alternano
    "Secondo Testo 2", 
    "Testo 3", 
    "frase 4",
    "frase 5"
];             

window.onload=Fade;
 
 
function Fade(o,i){
  o=+!o; i=i||0; i++; if(i>=(tx.length*2)) i=0;  
  var j=document.getElementById("id_header");
  j.innerHTML=tx[i>>1];
  with(j.style) opacity=o, transition="opacity "+T+"s"; 
setTimeout(function(){ Fade(o,i); },1000*T);
}


</script>  
  </head>
  <body>

<div id="id_header" style='font:bold 32px Arial;'></div>

  </body>
</html>

Discussione: Help domanda brevissima sull'header

Strumenti discussione

Ricerca discussione

Visualizza

Help domanda brevissima sull'header

Permessi di invio