¿Cómo puedo animar el dibujo de texto en una página web?
Quiero tener una página web que tenga una palabra centrada.
Quiero que esta palabra se dibuje con una animación, de modo que la página "escriba" la palabra de la misma manera que lo haríamos nosotros, es decir, comience en un punto y dibuje líneas y curvas a lo largo del tiempo de manera que el resultado final sea un glifo.
No me importa si esto se hace con <canvas>el DOM, y no me importa si se hace con JavaScript o CSS. La ausencia de jQuery sería buena, pero no obligatoria.
¿Cómo puedo hacer esto? He buscado exhaustivamente sin suerte.
Quiero que esta palabra se dibuje con una animación, de modo que la página "escriba" la palabra de la misma manera que lo haríamos
Versión lienzo
Esto dibujará caracteres individuales más como si se escribieran a mano. Utiliza un patrón de guión largo donde el orden de encendido/apagado se intercambia con el tiempo por carácter. También tiene un parámetro de velocidad.
Animación de ejemplo (ver demostración a continuación)
Para aumentar el realismo y la sensación orgánica, agregué espaciado aleatorio entre letras, cualquier desplazamiento delta y, transparencia, una rotación muy sutil y, finalmente, utilicé una fuente ya "escrita a mano". Estos pueden agruparse como parámetros dinámicos para proporcionar una amplia gama de "estilos de escritura".
Para una apariencia aún más realista, se requerirían los datos de la ruta, que no son los predeterminados. Pero este es un código breve y eficiente que se aproxima al comportamiento escrito a mano y es fácil de implementar.
Cómo funciona
Al definir un patrón de guiones podemos crear hormigas en marcha, líneas de puntos, etc. Aprovechando esto al definir un punto muy largo para el punto "apagado" y aumentar gradualmente el punto "encendido", dará la ilusión de dibujar la línea cuando se acaricia mientras se anima la longitud del punto.
Dado que el punto apagado es tan largo, el patrón repetido no será visible (la longitud variará según el tamaño y las características del tipo de letra que se utilice). El camino de la letra tendrá una longitud, por lo que debemos asegurarnos de que cada punto cubra al menos esta longitud.
Para las letras que constan de más de un trazado (por ejemplo, O, R, P, etc.), como uno para el contorno y otro para la parte hueca, las líneas parecerán dibujadas simultáneamente. No podemos hacer mucho al respecto con esta técnica, ya que requeriría que el acceso a cada segmento del camino se trazara por separado.
Compatibilidad
Para los navegadores que no admiten el elemento lienzo, se puede colocar una forma alternativa de mostrar el texto entre las etiquetas, por ejemplo, un texto con estilo:
<canvas ...>
<div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>
Manifestación
Esto produce el trazo animado en vivo ( sin dependencias ).
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>
Apr 28 '2015 07:04
Editar 2019
Creé una biblioteca de JavaScript que puede crear animaciones realistas. Es fácil de usar y requiere un archivo JSON especial que actúa como fuente.
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>Consulte la página de Github para obtener documentación y ejemplos. y codepen
Respuesta anterior
El siguiente ejemplo utiliza snap.js para crear tspanelementos dinámicamente y luego animar cada uno de ellos stroke-dashoffset.
Mostrar fragmento de código
Respuesta anterior
Puedes hacer algo como esto usando svg'sstroke-dasharray
Mostrar fragmento de código
Sin keyframesanimación puedes hacer algo como esto.
Mostrar fragmento de código
Y para soporte de IE puedes usar jquery/javascript
Mostrar fragmento de código
Sólo 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>