Istruzioni testo macchina da scrivere su joomla:
premessa: da configurazione globale alla voce “editor predefinito” mettere “nessun editor” e poi scrivere il testo direttamente sull’articolo o modulo personalizzato. Ricordarsi di riattivare l’editor una volta finito
Per i testi più complessi procedere in questo modo e poi registrare lo schermo e salvare come video/gif
testo semplice:
<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>
Testo con firma fissa:
<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>
Testo con firma scorrevole ma che parte insieme al testo principale:
<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>
Testo con firma che parte dopo un tot di millisecondi dal testo principale:
<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>
Sul sito prova macchina da scrivere:
<p id="testo" style="font-family: 'Courier New'; color: #000000; font-weight: bold; font-size: 14pt; line-height: 150%; text-align: justify;"></p>
<p id="firma" style="font-family: 'Courier New'; color: #000000; font-weight: bold; font-size: 14pt; line-height: 150%; text-align: right; transition-delay: 2s;"></p>
<script>
var i = 0;
var txt = "SCRIVERE QUI IL TESTO";
var speed = 30;
function typeWriter() {
if (i < txt.length) {
document.getElementById("testo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
typeWriter()
var j = 0;
var txt2 = " SCRIVERE QUI IL TESTO ";
var speed2 = 30;
function typeWriter2() {
if (j < txt2.length) {
document.getElementById("firma").innerHTML += txt2.charAt(j);
j++;
setTimeout(typeWriter2, speed);
}
}
setTimeout('typeWriter2()',11500);
</script>
con immagine di sfondo
<div style="background-image: url('indirizzo_completo_immagine.jpg'); background-attachment: Scroll; background size: width="contain" height="contain"; background-repeat: no-repeat;">
<p id="testo" style="font-family: 'Courier New'; color: #000000; font-weight: bold; font-size: 14pt; line-height: 150%; text-align: justify;"></p>
<p id="firma" style="font-family: 'Courier New'; color: #000000; font-weight: bold; font-size: 14pt; line-height: 150%; text-align: right; transition-delay: 2s;"></p>
<script>
var i = 0;
var txt = "SCRIVERE QUI IL TESTO";
var speed = 5;
function typeWriter() {
if (i < txt.length) {
document.getElementById("testo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
typeWriter()
var j = 0;
var txt2 = " SCRIVERE QUI IL TESTO ";
var speed2 = 5;
function typeWriter2() {
if (j < txt2.length) {
document.getElementById("firma").innerHTML += txt2.charAt(j);
j++;
setTimeout(typeWriter2, speed);
}
}
setTimeout('typeWriter2()',11500);
</script>
Macchina da scrivere con più testi e firme
<p id="testo" style="font-family: '1942 report'; color: #000000; font-weight: bold; font-size: 20pt; line-height: 150%; text-align: left;"></p>
<p id="firma" style="font-family: '1942 report'; color: #000000; font-weight: bold; font-size: 20pt; line-height: 150%; text-align: left; transition-delay:2s;"></p>
<p id="testo2" style="font-family: '1942 report'; color: #000000; font-weight: bold; font-size: 20pt; line-height: 150%; text-align: left;"> </p>
<p id="firma2" style="font-family: '1942 report'; color: #000000; font-weight: bold; font-size: 20pt; line-height: 150%; text-align: left; transition-delay:2s;"></p>
<script>
var i = 0;
var txt = "SCRIVERE QUI IL TESTO";
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 = "Thomas H. Ogden";
var speed2 = 50;
function typeWriter2() {
if (j < txt2.length) {
document.getElementById("firma").innerHTML += txt2.charAt(j);
j++;
setTimeout(typeWriter2, speed);
}
}
setTimeout('typeWriter2()',26500);
var ii = 0;
var txt3 = "SCRIVERE QUI IL TESTO";
var speed3 = 50;
function typeWriter3() {
if (ii < txt3.length) {
document.getElementById("testo2").innerHTML += txt3.charAt(ii);
ii++;
setTimeout(typeWriter3, speed);
}
}
setTimeout('typeWriter3()',28000);
var jj = 0;
var txt4 = "SCRIVERE QUI IL TESTO/FIRMA";
var speed4 = 50;
function typeWriter4() {
if (jj < txt4.length) {
document.getElementById("firma2").innerHTML += txt4.charAt(jj);
jj++;
setTimeout(typeWriter4, speed);
}
}
setTimeout('typeWriter4()',43000);
</script>
Breve guida per personalizzare lo script (realizzata da blackstar)
• 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