Mediante el uso inteligente de HTML, CSS y JavaScript, puede crear algunos sitios web bastante sorprendentes. Pero no le demos vueltas a las cosas; en realidad, escribir código puede parecer realista a veces, especialmente si recién está comenzando a aprender los conceptos básicos.
Por lo tanto, le recomendamos que pruebe algo nuevo de vez en cuando. Tal vez esté aprendiendo un nuevo elemento que nunca ha usado antes, o experimentando con CSS o un marco como Bootstrap.
Si crees que este es uno de esos momentos ahora, sigue leyendo. En esta guía, le mostraremos cómo generar texto de desplazamiento en HTML y CSS. Con este divertido truco, puedes crear una barra de mensajes, créditos finales para un video e incluso hacer que los visitantes se sientan inmersos en una galaxia muy, muy lejana.
Si bien es mejor mantener sus sitios simples y centrados en el contenido, algunos toques creativos aquí y allá pueden atraer a nuevos visitantes. A continuación, compartimos cuatro plantillas de código que puede copiar y personalizar para obtener un efecto de texto de desplazamiento sencillo.
Cómo crear texto de desplazamiento en CSS
Usaremos animaciones CSS junto con transformación: traducirX y transformación: traducir properties para obtener texto de desplazamiento usando CSS. Para la compatibilidad entre navegadores, también agregaremos reglas de animación con prefijos de proveedores. -webkit- (para Safari y Chrome) yo -moz- (para Firefox). Comencemos con el texto de derecha a izquierda.
Desplazar el texto CSS horizontalmente: de derecha a izquierda
Para hacer que nuestro texto se desplace de derecha a izquierda, lo pondremos en un div con una identificación desplazamiento de texto – este es un elemento que se moverá en su contenedor div, contenedor rodante. A continuación se muestra la animación de desplazamiento HTML, CSS y el resultado.
ver la pluma Desplazamiento de texto CSS: de derecha a izquierda de Christina Perricone (@hubspot) en CódigoPen.
En última instancia, tendrá que jugar un poco con CSS para lograr que el efecto de desplazamiento se vea de la forma que desea. Para cambiar la velocidad de desplazamiento, cambie el segundo valor animación bienes raíces z 10s a otra cosa Un valor más bajo acelera el efecto de desplazamiento y un valor más alto lo ralentiza.
La velocidad del desplazamiento también depende del ancho del div: cuanto más ancho sea el contenedor de desplazamiento, más rápido se desplazará el texto. Esto significa que la velocidad del texto cambia a medida que cambia el tamaño de la ventana del navegador. Para resolver este problema, puede establecer el ancho del contenedor de desplazamiento en un valor específico en píxeles.
Desplazar el texto CSS horizontalmente: de izquierda a derecha
Para desplazar el texto de izquierda a derecha, simplemente cambie positivo y negativo traducirX valores. Así que vamos a cambiar todas las instancias 100% abajo -100% y todos los casos -100% abajo 100%. También alineé el texto de adentro hacia la derecha. desplazamiento de texto para que el texto aparezca inmediatamente al principio de la animación.
ver la pluma Desplazamiento de texto CSS: de izquierda a derecha de Christina Perricone (@hubspot) en CódigoPen.
Texto de desplazamiento CSS vertical: de abajo hacia arriba
Para hacer que el texto se desplace verticalmente, cambie todas las apariciones traducirX abajo traducir. También centré el texto, reduje la duración de la animación a 5 segundos y le di al contenedor div un valor de altura para que el desplazamiento vertical fuera más visible.
ver la pluma Desplazamiento de texto CSS: de abajo hacia arriba de Christina Perricone (@hubspot) en CódigoPen.
Texto de desplazamiento CSS vertical: de arriba a abajo
Al igual que con el desplazamiento horizontal, solo necesita voltear nuestros positivos y negativos traducir valores para cambiar la dirección de desplazamiento vertical:
ver la pluma Desplazamiento de texto CSS: de arriba a abajo de Christina Perricone (@hubspot) en CódigoPen.
Texto de desplazamiento de JavaScript
Los elementos de texto de desplazamiento más elaborados y dinámicos pueden requerir JavaScript para imitar el efecto de marquesina, en lugar de depender únicamente de las animaciones CSS. Aquí hay algunos ejemplos de cómo usar JavaScript para este propósito.
Este primer ejemplo usa JavaScript (específicamente jQuery) para generar una animación de un ticker giratorio de un grupo de elementos de la lista. Lo bueno de esta implementación es que puede agregar tantos elementos de lista como desee sin tener que cambiar su script.
ver la pluma Desplazamiento infinito de texto horizontal de Jonathan Marzullo (@jonathan) en CódigoPen.
El siguiente ejemplo activa el texto de desplazamiento lateral de la acción de desplazamiento del usuario. Esto es bastante común en los sitios web y agrega una pequeña dimensión adicional para aumentar la participación.
ver la pluma Texto de desplazamiento horizontal por Nikola Antica (@nikantic) en CódigoPen.
Ejemplos de desplazamiento de texto
Una cosa es ver un ejemplo básico de desplazamiento de texto como demostración y otra muy distinta es ver cómo funcionó en el diseño de un sitio web. Para inspirarte, aquí hay algunos ejemplos de cómo se vería tu texto desplazable.
cosas digitales
El estudio User Experience Digital of Things utiliza texto desplazable en su página de inicio para lograr un efecto de toldo de página completa. Es mínimo pero efectivo y el texto se mueve con relativa lentitud para no abrumar al visitante.
Salsa Peppa Mama Joyce
El texto que se desplaza domina la página de inicio de esta marca de salsas picantes. A medida que se desplaza hacia abajo, el texto se mueve de izquierda a derecha, de derecha a izquierda y verticalmente por la página. Es un festín para los ojos que seguramente llamará la atención de cualquiera en el mercado para obtener su nuevo accesorio.
Restaurar la revocación de la esperanza
Este sitio web del fondo de ayuda para desastres presenta un texto desplazable más sutil. Los diseñadores se centraron en las imágenes y los artículos, colocando el texto desplazable en la parte inferior de la pantalla. Nuevamente, este texto se mueve lentamente ya que su tamaño dificultaría la lectura a velocidades más altas.
escuadrónfácil
Una página 404 Squadeasy hace un muy buen trabajo al decirle que es una página 404 al desplazarse por el texto en toda la pantalla. Además, la cabeza flotante del cachorro hace que todo sea ligero.
andrzej leguay
Finalmente, tenemos un sitio web del portafolio del diseñador Andrew Leguay. Desplácese hacia abajo en la página de inicio y notará un uso inteligente del texto desplazable para mostrar las marcas con las que ha trabajado. Este texto desplazable también está ligeramente sesgado, lo que hace que el elemento de la página se destaque aún más.
Texto de desplazamiento HTML5: nota sobre el elemento de marquesina
Además de las animaciones CSS, hay otra forma de crear texto desplazable usando HTML puro, usando . Esta etiqueta crea automáticamente una región de página con texto desplazable y puede personalizar su función con varios atributos:
ver la pluma ejemplos de toldos de Christina Perricone (@hubspot) en CódigoPen.
Sin embargo (y es grande «Sin embargo»), el elemento de marquesina está obsoleto en HTML5 y no recomendamos usarlo por este motivo. Si los ejemplos anteriores funcionan en su navegador, ¡genial! Pero lo más probable es que no lo sean en el futuro. Por lo tanto, apéguese al método CSS de animación de desplazamiento que explicamos anteriormente, ya que está en línea con los estándares CSS3 actuales.
¿Quieres aprender más sobre cómo funcionan HTML y CSS? Hemos reunido todo lo que los especialistas en marketing necesitan saber sobre estos idiomas en un libro electrónico gratuito; descárguelo a continuación.
Nota del editor: esta publicación se publicó originalmente en junio de 2021 y se actualizó para que sea completa.
