[RISOLTO] Joomla testo macchina da scrivere

[Blackstar]

Ho modificato il codice. Ora l'interlinea è a 1,5 ed il testo è giustificato.
Per cambiare una parte del testo non ho in mente nessuna soluzione. Probabilmente server uno script più complesso, o il alternativa usare più volte lo script con impostazioni diverse.

Codice:

<p id="testo" style="font-family: 'Courier New'; color: #800000; font-weight: bold; font-size: 20pt; line-height: 150%; text-align: justify;">_</p>
<script>
var i = 0;
var txt = "Cantami, o Diva, del pelide Achille l'ira funesta che infiniti addusse lutti agli Achei, molte anzi tempo all'Orco generose travolse alme d'eroi, e di cani e d'augelli orrido pasto lor salme abbandonò (così di Giove l'alto consiglio s'adempìa), da quando primamente disgiunse aspra contesa il re de' prodi Atride e il divo Achille";
var speed = 50;
function typeWriter() {
  if (i < txt.length) {
    document.getElementById("testo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
typeWriter()
</script>

[Blackstar]

Breve guida per personalizzare lo script

• font-family: definisce il tipo di carattere. il courier new è il più simile a quello della macchine da scrivere tra i font standard
  
• color: definisce il colore del testo, il valore che ho inserito è una specie di rosso mattone
  
• font-weight: impostato su bold usa un font grassetto, se non serve si può rimuovere
  
• font-size: è la dimensione del carattere
  
• line-height: è l'interlinea
  
• text-align: server per giustificare il testo
  
• speed è la velocità con cui compaiono le lettere, si può aumentare o diminuire
  
• txt è ovviamente il testo che si vuole far comparire
  

[nicolo74]

Ringrazio entrambi. Nessuna fretta come detto sto facendo tutto per hobby.

<\n> non funziona credo perché il punto in cui vorrei andare a capo si trova tra virgolette. Per rimanere nell'esempio

Codice:

<p id="testo" style="font-family: 'Courier New'; color: #800000; font-weight: bold; font-size: 20pt; line-height: 150%; text-align: justify;">_</p>
<script>
var i = 0;
var txt = "Cantami, o Diva, del pelide Achille l'ira funesta che infiniti addusse lutti agli Achei, molte anzi tempo all'Orco generose travolse alme d'eroi, e di cani e d'augelli orrido pasto lor salme abbandonò




(così di Giove l'alto consiglio s'adempìa), da quando primamente disgiunse aspra contesa il re de' prodi Atride e il divo Achille";
var speed = 50;
function typeWriter() {
  if (i < txt.length) {
    document.getElementById("testo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
typeWriter()
</script>

il punto in cui vorrei andare a capo è quello in cui ho inserito tre righe  vuote (abbandono [...](così di Giove)

[nicolo74]

Breve guida per personalizzare lo script

• font-family: definisce il tipo di carattere. il courier new è il più simile a quello della macchine da scrivere tra i font standard
  
• color: definisce il colore del testo, il valore che ho inserito è una specie di rosso mattone
  
• font-weight: impostato su bold usa un font grassetto, se non serve si può rimuovere
  
• font-size: è la dimensione del carattere
  
• line-height: è l'interlinea
  
• text-align: server per giustificare il testo
  
• speed è la velocità con cui compaiono le lettere, si può aumentare o diminuire
  
• txt è ovviamente il testo che si vuole far comparire
  

Gentilissima come sempre. Alcune cose ero riuscito a modificarle come ad esempio la velocità e il colore. Come detto non riesco ad andare a capo nel testo da far comparire, la frase che devo inserire ha un autore e vorrei che il nome andasse a capo.
Mi sa che non ho alternativa: devo mettermi a studiare il linguaggio HTML anche se nel sito cortesemente indicato da @BAT ci sono infiniti banner che ne complicano la lettura, pazienza dovrò provvedere ad eliminarli.

[Blackstar]

Hai ragione con questo metodo i caratteri speciali non funzionano.
Se ti va bene che la firma sia visibile da subito e senza effetto macchina da scrivere, allora ti basta inserirla in un uovo paragrafo:

Codice:

<p id="testo" style="font-family: 'Courier New'; color: #800000; font-weight: bold; font-size: 20pt; line-height: 150%; text-align: justify;"></p>
<br>
<p id="testo" style="font-family: 'Courier New'; color: #800000; font-weight: bold; font-size: 20pt; line-height: 150%; text-align: justify;">Omero</p>
<script>
var i = 0;
var txt = "Cantami, o Diva, del pelide Achille l'ira funesta che infiniti addusse lutti agli Achei, molte anzi tempo all'Orco generose travolse alme d'eroi, e di cani e d'augelli orrido pasto lor salme abbandonò (così di Giove l'alto consiglio s'adempìa), da quando primamente disgiunse aspra contesa il re de' prodi Atride e il divo Achille";
var speed = 50;
function typeWriter() {
  if (i < txt.length) {
    document.getElementById("testo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
typeWriter();
</script>

Se invece vuoi l'effetto macchina da scrivere anche sulla firma si può duplicare lo script (l'effetto però non è dei migliori perché i due script partano in parallelo):

Codice:

<p id="testo" style="font-family: 'Courier New'; color: #800000; font-weight: bold; font-size: 20pt; line-height: 150%; text-align: justify;">_</p>
<p id="firma" style="font-family: 'Courier New'; color: #800000; font-weight: bold; font-size: 20pt; line-height: 150%; text-align: justify;">_</p>
<script>
var i = 0;
var txt = "Cantami, o Diva, del pelide Achille l'ira funesta che infiniti addusse lutti agli Achei, molte anzi tempo all'Orco generose travolse alme d'eroi, e di cani e d'augelli orrido pasto lor salme abbandonò (così di Giove l'alto consiglio s'adempìa), da quando primamente disgiunse aspra contesa il re de' prodi Atride e il divo Achille";
var speed = 50;
function typeWriter() {
  if (i < txt.length) {
    document.getElementById("testo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
typeWriter()

var j = 0;
var txt2 = "Iliade - Omero";
var speed2 = 50;
function typeWriter2() {
  if (j < txt2.length) {
    document.getElementById("firma").innerHTML += txt2.charAt(j);
    j++;
    setTimeout(typeWriter2, speed);
  }
}
typeWriter2()
</script>

[nicolo74]

... e se il secondo testo, la firma, partisse in ritardo, cioè dopo qualche secondo? Ho letto un po' ed ho trovato che gli effetti di transizione si possono ritardare con

Codice:

transition-delay: 10s

ho provato ad inserirlo ma senza alcun risultato perché evidentemente sbaglio qualcosa.

[Blackstar]

transition-delay se ho capito bene lavora sulle transizioni per cui non penso possa intervenire su uno script. penso di aver risolto ritardando l'esecuzione del secondo script

Codice:

<p id="testo" style="font-family: 'Courier New'; color: #800000; font-weight: bold; font-size: 20pt; line-height: 150%; text-align: justify;">_</p>
<p id="firma" style="font-family: 'Courier New'; color: #800000; font-weight: bold; font-size: 20pt; line-height: 150%; text-align: justify; transition-delay: 2s;">_</p>
<script>
var i = 0;
var txt = "Cantami, o Diva, del pelide Achille l'ira funesta che infiniti addusse lutti agli Achei, molte anzi tempo all'Orco generose travolse alme d'eroi, e di cani e d'augelli orrido pasto lor salme abbandonò (così di Giove l'alto consiglio s'adempìa), da quando primamente disgiunse aspra contesa il re de' prodi Atride e il divo Achille";
var speed = 50;
function typeWriter() {
  if (i < txt.length) {
    document.getElementById("testo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
typeWriter()

var j = 0;
var txt2 = "Iliade - Omero";
var speed2 = 50;
function typeWriter2() {
  if (j < txt2.length) {
    document.getElementById("firma").innerHTML += txt2.charAt(j);
    j++;
    setTimeout(typeWriter2, speed);
  }
}
setTimeout('typeWriter2()',5000);
</script>

5000 è in millisecondi e si può ovviamente cambiare a piacimento

[nicolo74]

Perfetto, grazie infinite Blackstar.
Ho cronometrato il testo principale per inserire l'intervallo di partenza  
Grazie a tutti anche per la pazienza, non deve essere facile sopportarmi

[nicolo74]

Sono anche riuscito a mettere una immagine sotto il testo grazie a questo:

Codice:

<div style="background-image: url('https://www.ergosumracalmuto.org/renatoschembri/images/Varie/macchina_scrivere.jpg'); background-repeat: no-repeat;">

L'unico inconveniente è che l'immagina compare nel modulo solo fin dove arriva la scrittura, la parte rimanente non si vede, pazienza. Vi farei vedere l'effetto ma il sito è in costruzione.
EDIT: alla fine ho risolto inserendo semplicemente degli spazi vuoti

[nicolo74]

Altra curiosità: come faccio ad usare un'altra fonts, ad esempio una personalizzata tipo questa?
Ho visto on line che bisogna cambiare il template dopo aver convertito il file .ttf ma per quando ci riprovi non sono cosa, non ci riesco. forse più semplicemente potete indicarmi quali fonts posso usare in joomla e/o dove trovo l'elenco.
Grazie