No necesitas JavaScript para crear el clásico efecto de máquina de escribir. Aprenda a hacerlo solo con CSS usando la función pasos().
Las hojas de estilo en cascada (CSS) han recorrido un largo camino desde sus inicios. Hay cosas que son posibles solo con CSS que quizás no conozcas, gracias a la continua evolución y mejora del lenguaje.
Uno de los avances más notables en CSS es la aparición y el refinamiento de las funciones CSS, que han ampliado significativamente las capacidades y el poder de diseñar contenido web.
¿Qué es el efecto máquina de escribir?
El efecto máquina de escribir es una técnica de animación de texto que simula el proceso de revelación progresiva del contenido, imitando el acto de escribir a medida que se desarrolla ante los ojos del espectador. Este efecto recuerda a las máquinas de escribir de la vieja escuela, a los primeros terminales informáticos o a los Interfaces de línea de comandos (CLI).
La aparición gradual del texto añade un elemento de suspenso e intriga, animando a la audiencia a prestar mucha atención al mensaje que se desarrolla.
Cómo funciona la función CSS pasos()
Las funciones en CSS introducen un nivel de flexibilidad que antes era difícil de lograr usando estilos estáticos únicamente. El pasos() La función es una función popular que se utiliza en animaciones CSS. Hace que las animaciones parezcan avanzar en pasos distintos y discretos en lugar de realizar una transición suave.
pasos() es una función de sincronización de animación que toma dos parámetros. El primer parámetro indica la cantidad de pasos que desea que siga su animación. El segundo parámetro define el comportamiento de cada paso. La sintaxis para el pasos() funciones se ve así:
animation-timing-function: steps(n, direction)
En el bloque de código anterior, el pasos() La función tiene dos parámetros, a saber: norte y dirección. El dirección El parámetro puede ser comenzar o fin.
Configurando el dirección a comenzar garantiza que el primer paso se complete tan pronto como comience la animación. Considerando que, establecer el dirección a fin ejecutará el último paso cuando finalice la animación. Para ilustrar la importancia de la pasos() función, eche un vistazo al siguiente código HTML:
<divclass="container">
<div>div>
div>
El bloque de código anterior define un envase div con un niño div. Si desea que el div secundario se deslice por la pantalla, use animaciones CSS como esta:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
El bloque de código anterior utiliza el Regla @keyframes para definir una animación llamado caja de movimiento. Luego, esta animación se aplica al div secundario, lo que hace que se mueva suavemente por la pantalla en un bucle infinito.
vía GIPHY
Si no te gusta la animación fluida y quieres lograr un efecto "entrecortado", puedes utilizar el pasos() funcionar así:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}
Como puedes ver en el GIF a continuación, incorporando el pasos() La función con un valor de parámetro de 10 animará el div secundario en pasos en lugar de una animación suave. Cuanto mayor sea el número de pasos, menos entrecortada se verá la animación.
vía GIPHY
En el ejemplo anterior, el dirección Se proporciona el parámetro. Sin embargo, si omites el dirección, el navegador utilizará fin como valor predeterminado para dirección.
Creando el efecto de máquina de escribir
Ahora que entiendes cómo pasos() función funciona, es momento de poner en práctica todo lo aprendido. Cree una nueva carpeta y asígnele un nombre apropiado. En esa carpeta, agregue un índice.htm archivo para marcado y un estilo.css archivo para peinar.
En el índice.htm archivo, agregue el siguiente código repetitivo:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<divclass="container">
<divclass="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
div>
div>
body>
html>El bloque de código anterior define el marcado para un sitio web HTML sencillo. Hay un envase div que contiene otro div con texto ficticio.
Animando el texto
Abre el estilos.css archivo y establezca el ancho del envase div al ancho de su contenido.
.container{
width: fit-content;
}
A continuación, utilizando el @fotogramas clave regla, defina una animación que controle cómo progresa la animación a lo largo del tiempo. Establezca el ancho en "0%" en 0%. En 100%, establezca el ancho en "100%" así:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
A continuación, seleccione el elemento con el nombre de clase. texto y establecer el Desbordamiento propiedad a oculto. Hacer esto asegurará que el texto permanezca oculto mientras el efecto de escritura no haya comenzado. Después de hacer eso, asegúrese de que el texto permanezca en una línea configurando el espacio en blanco propiedad a ahorarap. Dar el texto clasifique una fuente monoespaciada y agregue un borde vertical verde a la derecha del texto.
Este borde dará la apariencia de un cursor. Establecer el apropiado tamaño de fuente y el animación propiedad a teclee el texto. Finalmente, agregue el pasos() función a la función de sincronización de animación.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "CourierNew", Courier, monospace;
border-right: solid 10pxgreen;
font-size: 23px;
animation: type-textforwards 4s;
animation-timing-function: steps(40);
}
Cuando ejecutas el código en el navegador, esto es lo que deberías ver:
vía GIPHY
Si desea un efecto de escritura más largo, puede ajustar la duración de la animación y el número de pasos especificados en el pasos() función.
Dando vida al cursor
El efecto de máquina de escribir está casi completo, aunque falta una característica, que es el cursor parpadeante. Recuerde que en el último bloque de código, se estableció un borde hacia la derecha en el texto para que sirviera como cursor. Puede agregar una animación a este cursor usando el @fotogramas clave gobernar también.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Después de definir la animación personalizada, agregue el nombre de la animación al animación propiedad en el texto clase y establezca la duración en 0,6 segundos.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Ahora, cuando ejecute el código, debería ver un cursor parpadeante.
vía GIPHY
El poder de las funciones CSS
Las funciones CSS han revolucionado la forma en que se crean los sitios web y le ofrecen un conjunto de herramientas extraordinario como desarrollador. Estas funciones versátiles permiten interacciones y estilos dinámicos que antes estaban reservados para lenguajes de secuencias de comandos complejos.
Desde manipulaciones de color hasta diseños responsivos, animaciones y transformaciones creativas, las funciones CSS han ampliado las posibilidades del diseño web. Con funciones como calc() para cálculos flexibles, gradiente lineal() para fondos impresionantes y traducir() para animaciones cautivadoras, puede crear usuarios visualmente atractivos y atractivos. experiencias.
