Efecto de texto autoescrito usando CSS y JavaScript

El efecto de texto autoescrito es un tipo de efecto en el que todos los alfabetos del texto se revelan uno por uno, uno tras otro para dar la apariencia de estar escritos en la pantalla por sí mismos. Aunque este es un efecto de texto básico, sigue siendo una captura de ojos y una animación efectiva. Esta animación se usa ampliamente en todas las aplicaciones web modernas y es muy fácil de implementar. Esto se puede diseñar e implementar usando solo CSS o solo JavaScripty los desarrolladores pueden modificar esta animación dependiendo de su creatividad. Por ejemplo, podemos aumentar o disminuir la velocidad de las revelaciones de texto o incluso agregar un cursor parpadeante al final del texto para mejorar la animación. Para una versión diferente del efecto de revelación de texto que funciona en las mismas líneas y es similar a este efecto de texto, consulte el artículo:

¿Cómo crear un efecto de revelación de texto usando HTML y CSS?

En este tutorial, implementaremos el efecto de texto de escritura automática utilizando HTML , CSS y JavaScript . Suponemos que está familiarizado con las reglas de HTML y CSS y tiene conocimientos básicos de animaciones CSS.

Paso 1: Instale Browsersync usando npm . Usaremos Browsersync para iniciar un servidor y proporcionar una URL para ver el sitio HTML, la animación CSS y cargar los archivos JavaScript respectivos. Instalaremos Browsersync globalmente.
```
npm install -g browser-sync
```

Paso 2: cree un archivo «index.html» , un archivo index.css y un index.js en la carpeta raíz de su proyecto. index.html: agregue el siguiente fragmento de código en ese archivo. Este archivo contiene los códigos para los archivos CSS y JavaScript que se incluyen.

html

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks</title>
  
    <!-- Loading External index.css file -->
    <link rel="stylesheet" href="index.css">
</head>
  
<body>
    <h2>
        GeeksforGeeks - Self Typing 
        Text Effect in CSS & JS
    </h2>
      
    <div class="wrapper">
        <div class="typewriter">
            <h1>Hello Geeks of GeeksforGeeks</h1>
        </div>
    </div>
    <button class="btn btn-lg" onclick="textEffect()">
        Self Typing Text Effect using HTML & JS
    </button>
    <h1 id="effect"></h1>
    <!-- Loading External index.js file -->
    <script src="index.js"></script>
</body>
  
</html>

index.css El desbordamiento: oculto; La propiedad CSS especifica el comportamiento del contenido si desborda el cuadro predeterminado de elementos HTML. Como hemos especificado hidden , el contenido se recortará inicialmente y será invisible para el usuario. Esto es importante ya que queremos asegurarnos de que el texto no se revele hasta que se complete la animación.

El espacio en blanco: nowrap; La propiedad CSS especifica el comportamiento de los espacios en blanco en el contenido del texto. Una secuencia de espacios en blanco, si está presente, se colapsará en un solo espacio en blanco y el contenido nunca se ajustará a la siguiente línea hasta que se encuentre una etiqueta br HTML. Esto es importante para evitar que la animación CSS se rompa.

El margen: 0 automático; La propiedad CSS simplemente extiende el margen a medida que se revela el texto, para admitir el efecto de escritura. Consulte los comentarios del código para una mejor comprensión. Hemos definido una clase contenedora adicional que rodea toda la animación CSS para alinearla con el centro de la pantalla usando la pantalla: flex; y justificar-contenido: centro; propiedades CSS. La animación CSS se activará tan pronto como se cargue el sitio web. Hemos utilizado una animación CSS simple para lograr el efecto de escritura como se muestra a continuación. Puede encontrar una explicación detallada aquí . Los pasos (30, final)es una función de temporización de animación CSS. El primer parámetro especifica el número de intervalos en la función y debe ser un número entero positivo mayor que 0 . El segundo parámetro es un parámetro opcional y el valor se establece como final .

Referir el artículo

CSS | animation-timing-function property

CSS

.wrapper {
  
    /* Keeping the Text in the 
       center of the Screen */
    display: flex;
    justify-content: center;
}
  
.typewriter h1 {
    /* Content is not revealed 
       until the animation */
    overflow: hidden;
  
    /* Keeps the content on a single line */
    white-space: nowrap;
  
    /* Gives that scrolling effect 
       as the typing happens */
    margin: 0 auto;
  
    /* Typing Effect Animation */
    animation: typing 3.5s steps(30, end)
}
  
/* Typing Effect on Website Loading */
@keyframes typing {
    from {
        width: 0
    }
    to {
        width: 100%
    }
}

index.js: en este archivo, agregamos manualmente cada alfabeto al elemento #effect de la etiqueta HTML h1 incrementando un valor de índice , obteniendo y agregando cada carácter del texto usando las funciones de JavaScript charAt() y setTimeout() . El intervalo establecido en la función setTimeout() determina la velocidad a la que se revelará el texto, mostrando así el efecto de escritura automática. La función textEffect() se activa mediante la propiedad HTML onClick del efecto de texto autoescrito mediante el botón HTML y JS . En nuestro caso, hemos establecido el intervalo en 50 ms.pero puede reajustarse según la conveniencia.

var index = 0;
var text = 'Hello Geeks of GeeksforGeeks';
var speed = 50;
  
function textEffect() {
    if (index < text.length) {
        document.getElementById("effect")
                .innerHTML += text.charAt(index);
        index++;
        setTimeout(textEffect, speed);
    }
}

Paso 3: en este punto, nuestro efecto de texto de escritura automática está listo. Para iniciar la aplicación usando Browsersync, ejecute el siguiente comando en el directorio del proyecto o puede ejecutar el archivo HTML directamente en su navegador.
```
browser-sync start --server --files "*"
```
Salida: Esto inicia Browsersync en modo servidor y observa todos los archivos dentro del directorio en busca de cambios según lo especificado por el comodín * . La aplicación se iniciará en http://localhost:3000/ de forma predeterminada.

Publicación traducida automáticamente

Artículo escrito por radheshkhanna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

html

CSS

Deja una respuesta Cancelar la respuesta