Voglio avere una pagina web che abbia una parola centrata.

Voglio che questa parola sia disegnata con un'animazione, in modo tale che la pagina "scriva" la parola nello stesso modo in cui vorremmo, cioè inizia da un punto e disegna linee e curve nel tempo in modo che il risultato finale sia un glifo.

Non mi importa se questo è fatto con <canvas>o il DOM e non mi importa se è fatto con JavaScript o CSS. L'assenza di jQuery sarebbe piacevole, ma non necessaria.

Come posso fare questo? Ho cercato esaustivamente senza fortuna.

Voglio che questa parola sia disegnata con un'animazione, in modo tale che la pagina "scriva" la parola nello stesso modo in cui vorremmo

Versione su tela

Questo attirerà singoli caratteri più come uno scriverà a mano. Utilizza un lungo trattino in cui l'ordine di attivazione / disattivazione viene scambiato nel tempo per carattere. Ha anche un parametro di velocità.

^{Esempio di animazione (vedere la demo seguente)}

Per aumentare il realismo e l'atmosfera organica, ho aggiunto una spaziatura casuale delle lettere, un offset delta y, trasparenza, una rotazione molto sottile e infine usando un carattere già "scritto a mano". Questi possono essere raggruppati come parametri dinamici per fornire una vasta gamma di "stili di scrittura".

Per un aspetto ancora più realistico sarebbero necessari i dati del percorso che non sono predefiniti. Ma questo è un breve ed efficace pezzo di codice che si avvicina al comportamento scritto a mano e facile da implementare.

Come funziona

Definendo uno schema a tratteggio possiamo creare formiche in marcia, linee tratteggiate e così via. Approfittando di questo definendo un punto molto lungo per il punto "off" e aumentando gradualmente il punto "on", si darà l'illusione di tracciare la linea quando viene accarezzato mentre si anima la lunghezza del punto.

Poiché il punto spento è così lungo, il motivo ripetuto non sarà visibile (la lunghezza varierà con la dimensione e le caratteristiche del carattere tipografico in uso). Il percorso della lettera avrà una lunghezza, quindi dobbiamo assicurarci di avere almeno ogni punto ogni punto che copra questa lunghezza.

Per le lettere che consistono in più di un percorso (es. O, R, P ecc.) Come uno è per il contorno, uno è per la parte vuota, le linee appariranno disegnate simultaneamente. Non possiamo fare molto al riguardo con questa tecnica in quanto richiederebbe l'accesso a ciascun segmento di percorso da tracciare separatamente.

Compatibilità

Per i browser che non supportano l'elemento canvas è possibile posizionare un modo alternativo per mostrare il testo tra i tag, ad esempio un testo con stile:

<canvas ...>
    <div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>

dimostrazione

Questo produce il tratto animato animato tratto-on ( nessuna dipendenza ) -

var ctx = document.querySelector("canvas").getContext("2d"),
    dashLen = 220, dashOffset = dashLen, speed = 5,
    txt = "STROKE-ON CANVAS", x = 30, i = 0;

ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif"; 
ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#1f2f90";

(function loop() {
  ctx.clearRect(x, 0, 60, 150);
  ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
  dashOffset -= speed;                                         // reduce dash length
  ctx.strokeText(txt[i], x, 90);                               // stroke letter

  if (dashOffset > 0) requestAnimationFrame(loop);             // animate
  else {
    ctx.fillText(txt[i], x, 90);                               // fill final letter
    dashOffset = dashLen;                                      // prep next char
    x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
    ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());        // random y-delta
    ctx.rotate(Math.random() * 0.005);                         // random rotation
    if (i < txt.length) requestAnimationFrame(loop);
  }
})();

canvas {background:url(http://i.imgur.com/5RIXWIE.png)}

<canvas width=630></canvas>

Modifica 2019

Ho creato una libreria javascript in grado di creare animazioni realistiche. È facile da usare e richiede uno speciale file JSON che funge da carattere.

var vara = new Vara("#container", "https://rawcdn.githack.com/akzhy/Vara/ed6ab92fdf196596266ae76867c415fa659eb348/fonts/Satisfy/SatisfySL.json", [{
  text: "Hello World!!",
  fontSize: 48,
  y:10
}, {
  text: "Realistic Animations",
  fontSize: 34,
  color:"#f44336"
}], {
  strokeWidth: 2,
  textAlign:"center"
});

#container {
  padding: 30px;
}

<script src="https://rawcdn.githack.com/akzhy/Vara/16e30acca2872212e28735cfdbaba696a355c780/src/vara.min.js"></script>
<div id="container"></div>

Checkout la pagina di Github per la documentazione e gli esempi. E Codepen

Risposta precedente

L'esempio seguente usa snap.js per creare dinamicamente tspanelementi e animare ciascuno di essi stroke-dashoffset.

var s = Snap('svg');
var text = 'Some Long Text'
var len = text.length;
var array = [];
for (var x = 0; x < len; x++) {
  var t = text[x]
  array.push(t);
}
var txt = s.text(50, 50, array)
$('tspan').css({
  'font-size': 50,
  fill: 'none',
  stroke: 'red',
  "stroke-width":2,
  'stroke-dasharray': 300,
  'stroke-dashoffset': 300
})

$('tspan').each(function(index) {
  $(this).stop(true, true).delay(300 * index).animate({
    'stroke-dashoffset': 0,
  }, 300, function() {
    $(this).css('fill', 'red')
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">
</svg>

Risposta precedente

Puoi fare qualcosa del genere usando svg's stroke-dasharray

text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: draw 8s forwards;
}
@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: draw 8s forwards;
  -moz-animation: draw 8s forwards;
  -o-animation: draw 8s forwards;
  -ms-animation: draw 8s forwards;
  animation: draw 8s forwards;
}
@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-ms-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

<svg width="500" height="500">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="1" font-size="50">Some text</text>
</svg>

Senza keyframesanimazione puoi fare qualcosa del genere

<svg width="500" height="500">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="5" font-size="50"  stroke-dasharray="1000"
  stroke-dashoffset="1000">Some text
  <animate attributeName="stroke-dashoffset"
    from="1000"
    to="0" 
    dur="8s"
      fill="freeze">
          
      </animate> </text>
</svg>

E per il supporto IE puoi usare jquery / javascript

$('text').animate({
    'stroke-dashoffset':'0'
},8000)

text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="1" font-size="50" 
 >Some text
  </text>
</svg>

Solo CSS:

@keyframes fadein_left {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}

#start:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0%;
  opacity: 0.7;
  height: 25px;
  background: #fff;
  animation: fadein_left 3s;
}

<div id="start">
  some text some text some text some text some text
</div>

A seguito di numerosi test, ecco alcune note. L'obiettivo è visualizzare dati di testo rapidi nel modo meno bloccante, su pagine pesanti di DOM che richiedono interazioni con gli utenti.

Esistono ovviamente molti modi per ottenere la stessa cosa. In questo esempio, le differenze potrebbero non essere ovvie, si applicano davvero a interfacce complesse.

Più lento : innerHTMLe styling in linea. Il DOM viene ricalcolato ad ogni iterazione. Il browser sta lavorando sodo per mantenere il treno. Fallirà rapidamente, causando perdite di memoria e blocchi:

setInterval(function(){
  out.innerHTML = `<span style="position:fixed;top:${~~(Math.random() * 220)}px">${Math.random() * 1000}<span>`
},1)

<h1 id="out"></h1>

Modo migliore : Utilizzando textContent, requestAnimationFramee l'API web di animazione. Questo diventa più fluido, è ovvio nelle pagine pesanti di DOM. Le interazioni dell'utente non bloccheranno le ridisegni. Alcuni ritocchi potrebbero essere saltati, per mantenere l'interfaccia ben reattiva.

let job
const paint = () => {
  job = requestAnimationFrame(paint)
  out.textContent = Math.random() * 1000
  out.animate([{top: ~~(Math.random() * 220)+"px"},{top:0}],{duration: 1,iterations: 1})
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(paint)

#out{
position: fixed}

<h1 id="out"></h1>

Nell'esempio sopra, il DOM viene ancora ricalcolato per l'overflow del testo. Possiamo vedere il debugger lampeggiare forte. Questo conta davvero sugli elementi a cascata! Questo può ancora rallentare javascript e lo scorrimento degli utenti.

Piena potenza : è possibile utilizzare solo css per aggiornare i dati con la contentregola css e le variabili css. Il testo non sarà quindi selezionabile.

let job
const paint = () => {
  job = requestAnimationFrame(paint)
  out.setAttribute('data-before', Math.random() * 1000)
  out.animate([{top: ~~(Math.random() * 220)+"px"},{top:0}],{duration: 1,iterations: 1})
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(paint)

#out{
  position: fixed
  
  }
#out:before {
   content: attr(data-before)
 }

<h1 id="out"></h1>

I miei test mostrano grandi miglioramenti, il motore javascript sta saltando rapidamente su altre attività. A volte può iniziare un po 'più lentamente dell'esempio sopra. Ma a parte questo, questo non blocca gli scroll degli utenti e anche il debugger sta gradendo, non più salti.