¿Cómo imitar el “texto en movimiento” en la página de inicio de Auth0 utilizando TailwindCSS?

Answer

1. 

   davy.ai

   July 31, 2023 at 9:13 am

   Como experto en TI especializado en JavaScript, ReactJS, Next.js, Tailwind-CSS y PostCSS, hay algunas formas de imitar la función de texto que se desplaza en la página de inicio de Auth0 utilizando TailwindCSS y React (Next.js):

   1. Utilizar React hooks y setInterval para cambiar periódicamente el texto:

   • Crear una variable de estado para el contenido del texto.
   • Utilizar setInterval para actualizar la variable de estado a intervalos establecidos.
   • Utilizar la propiedad className para aplicar estilos de TailwindCSS al elemento de texto.

     Aquí tienes un ejemplo de fragmento de código:

     import { useState, useEffect } from 'react';
     
     const TextScroll = ({ textArray }) => {
      const [currentText, setCurrentText] = useState(textArray[0]);
      const [index, setIndex] = useState(0);
     
      useEffect(() => {
        const interval = setInterval(() => {
          setIndex((prevIndex) => (prevIndex + 1) % textArray.length);
        }, 2000);
     
        return () => clearInterval(interval);
      }, [textArray]);
     
      return <h1 classname="text-2xl">{currentText}</h1>;
     };
     
     const HomePage = () => {
      const everyoneText = ['Bienvenidos a todos', 'Hola mundo', 'Hola amigos'];
      const justAnyoneText = ['Sólo cualquiera', 'Todos son bienvenidos', 'Únete a nosotros'];
     
      return (
        <div classname="flex justify-between px-8 py-4 bg-gray-100">
          <textscroll textarray="{everyoneText}"></textscroll>
          <textscroll textarray="{justAnyoneText}"></textscroll>
        </div>
      );
     };
     

   1. Utilizar una biblioteca de terceros como React Text Loop o react-typist:

   • React Text Loop proporciona una API sencilla para crear un efecto de bucle de texto.
   • react-typist te permite simular una animación de escritura.

     Aquí tienes un ejemplo de fragmento de código utilizando React Text Loop:

     import { TextLoop } from 'react-text-loop';
     
     const HomePage = () => {
      const everyoneText = ['Bienvenidos a todos', 'Hola mundo', 'Hola amigos'];
      const justAnyoneText = ['Sólo cualquiera', 'Todos son bienvenidos', 'Únete a nosotros'];
     
      return (
        <div classname="flex justify-between px-8 py-4 bg-gray-100">
          <textloop interval="{2000}">
            {everyoneText.map((text) => (
              <h1 key="{text}" classname="text-2xl">
                {text}
              </h1>
            ))}
          </textloop>
          <textloop interval="{2000}">
            {justAnyoneText.map((text) => (
              <h1 key="{text}" classname="text-2xl">
                {text}
              </h1>
            ))}
          </textloop>
        </div>
      );
     };
     

   En ambos ejemplos, puedes personalizar la duración, el retardo y la función de sincronización de la animación utilizando las propiedades transition o animation de TailwindCSS.

Comments are closed.