Hace muchos años, las animaciones de texto de desplazamiento (o cualquier tipo de animación de texto CSS) estaban en todas partes en Internet. Fueron fáciles de configurar con la etiqueta
El desplazamiento de texto puede haber comenzado como una característica divertida y caprichosa de los sitios web… ¡pero pronto se convirtió en una característica cliché y molesta de la navegación! La gente se volvió en contra a lo grande. De hecho, TechRepublic los describió una vez como “un tema de odio intenso”, una “criatura horrible” y “una figura de burla”. ¡Ay! y eso fue en 2007.
El tribunal de la opinión pública había llegado a su veredicto: las animaciones de texto de desplazamiento se culpable, de delitos contra la experiencia de usuario! ¿La frase? ¡Exilio! ¡Destierro! Sus etiquetas HTML quedarían obsoletas y se arrojarían al mismo hoyo en el que se arrojó Comic Sans, para verse solo en la página de Geocities de su tío Bob que olvidó eliminar.
Pero hoy, quiero reabrir el caso y presentar nuevas pruebas. ¡La corte ahora está en sesión, todos de pie!
El caso contra las animaciones de texto de desplazamiento
Para defender el desplazamiento del texto, debemos comprender los argumentos en su contra y desarrollar contramedidas. Las principales quejas en su contra son:
- Es molesto
- Desvía tu atención de otras partes de la página.
- ¡Es demasiado malditamente lento! El texto tarda años en aparecer en la pantalla. Estás ahí sentado golpeando el escritorio con los puños, esperando el mensaje, gritando “¡VAMOS, MALDITO! ¡ESTÁS DESPLAZANDO MUY LENTO, TEXTO DESTRUIDO!” (O podría ser solo yo. No se preocupe, se está buscando ayuda profesional).
- Parece… viejo. Ejercicio. Cansado. Usado.
Entonces, si queremos evitar estas trampas, debemos seguir estas reglas de oro:
Usa el texto desplazable con mucha, mucha moderación
No sobrecargue sus páginas con texto que se desplaza o su sitio se verá como una página de MySpace de 2004. El texto que se desplaza es como chile: un poco puede agregar sabor, pero demasiado deja un mal sabor de boca. Puede considerar activar solo el comportamiento de desplazamiento al pasar el mouse.
No lo use cerca de contenido clave
No lo use cuando hay algo más importante en la página sobre lo que desea llamar la atención de su visitante, como un CTA, un beneficio clave del producto o algo así. Use la animación para llamar la atención donde lo desee, no lejos de donde lo desee.
Hay una excepción a esta regla: cuando el contenido clave se encuentra en un medio diferente, por ejemplo, audio o video. Un excelente ejemplo de esto son las noticias en la televisión: a menudo muestran titulares que se desplazan por la parte inferior mientras se muestra el informe de noticias clave.
No desplace el contenido de la clave
Evite poner contenido clave que desea que el visitante lea en el texto de desplazamiento. Si hace esto, los está obligando a leer a una velocidad particular, en lugar de la velocidad que ellos quieren. Quitarle el control a sus visitantes solo los frustrará.
Mire, el desplazamiento de texto funciona bien en la estación de tren, donde el panel de visualización solo tiene un ancho limitado pero el tren tiene 24 paradas. Pero en un sitio web, tienes todo el espacio que necesitas. ¡Úsalo!
Entonces, ¿qué deberías poner en el texto desplazable? Bueno, haga que el texto sea obvio/de fondo/información complementaria, o permítales controlar el desplazamiento de alguna manera (por ejemplo, a través de la rueda del mouse)
Hágalo único, divertido, novedoso o inteligente.
Básicamente, evite las animaciones de texto de desplazamiento en texto ordinario, a menos que sea con fines de parodia, como en el ejemplo anterior de A Few Good Men.
Si puede cumplir con estas 4 condiciones, el desplazamiento de texto le brinda una ventaja clave: nadie más lo está haciendo, ¡así que podría ayudarlo a destacarse entre la multitud!
Bien, tenemos contramedidas listas para los argumentos de la fiscalía. Ahora es el momento de presentar el caso de la defensa.
Entonces, su señoría, le presento 7 animaciones de texto de desplazamiento para su sitio web que, cuando se usan cuidadosamente y en el proyecto correcto, ¡podrían funcionar realmente bien!
1. Animación de texto de radio de desplazamiento
Aquí hay un buen ejemplo de tiffany rayside, de utilizar el desplazamiento de texto como novedad. Por supuesto, el desplazamiento de texto existía mucho antes de Internet, y solía hacerse (¡y a veces todavía se hace!) utilizando una cuadrícula de bombillas o LED. Esta animación simula muy bien ese efecto.
Cuando piensas en animaciones de desplazamiento de texto, probablemente piensas en oraciones, ¿verdad? Pero, ¿por qué no simplemente desplazar una sola palabra? Mira este ejemplo de Roël Couwenberg:
Tenga en cuenta que esto evita los problemas clave con el desplazamiento del texto. No proporciona contenido clave y obtienes lo que te dice de inmediato. Tampoco distrae demasiado, ya que solo se mueve una palabra. Podría ser ideal en la página de destino de un producto, tal vez desplazándose a través de 3-4 puntos de venta únicos de una palabra del producto, para que el usuario tenga una idea de cómo puede beneficiarlo de inmediato.
Bien, hemos intentado desplazar palabras sueltas, ¡vamos un paso más allá!
Este bolígrafo de Oye tiene una serie de efectos de texto geniales e inteligentes que le gustaría ver, pero me gustaría llamar su atención sobre el ejemplo SLOTS. ¿Quién dijo que las palabras completas necesitan ser desplazadas? ¡Puedes desplazarte por letras individuales! Esto podría funcionar bien en un sitio de apuestas, o quizás en un artículo sobre apuestas.
Con esta animación, no tenemos que preocuparnos por el punto 3 anterior, porque puedes ver la palabra completa en todo momento. Sin embargo, debemos preocuparnos por los puntos 1 y 2: podría volverse molesto y desviar la atención de cosas más importantes. Caso sólido para activar este solo al pasar el mouse.
4. Últimas noticias
Como se señaló anteriormente, las animaciones de texto desplazable tienen un lugar cuando el contenido clave del sitio no es texto, es decir, video o audio. Y el ejemplo clásico de esto son los titulares de “Noticias de última hora” que ves en los canales de noticias. Aquí hay una implementación CSS pura de esto por Nate Levine:
La velocidad predeterminada es un poco rápida para mi gusto, pero puede ajustar la velocidad de desplazamiento del texto con la propiedad de animación de las clases ticker-news y ticker-title. ¡Y probablemente querrá eliminar el logotipo “5” o reemplazarlo por el suyo propio!
Puede superponer esto en un video para brindar información adicional o comentarios. Pero debido a que está en HTML y CSS y no es parte del video en sí, puede hacerlo interactivo, tal vez agregando enlaces o haciendo que el texto deje de desplazarse al pasar el mouse.
5. Desplazamiento del texto de fondo
Todas las críticas contra el texto que se desplaza se aplican cuando el texto está en primer plano, cuando es un elemento principal en el diseño del sitio. ¿Moverlo a un segundo plano resolvería los problemas? Bueno, echa un vistazo a este bolígrafo de [https://codepen.io/Praefect](Frank Talora), y decide por ti mismo:
Al igual que con el ejemplo anterior, el texto que usaría en esta situación no debería ser clave, no debería ser algo que su visitante necesite leer. Incluso podría ser el nombre de su marca o el eslogan (por ejemplo, Apple podría poner “Think Different” aquí. Solo necesitaría ver “Think D” antes de recibir el mensaje).
6. Animación de texto desplazable de Star Wars
¡Este es genial! tim pietrusky le encanta Star Wars, pero no pudo encontrar una versión web de ese texto icónico de la película original de 1977. Así que hizo uno, ¡y aquí está! Incluso incluyó la música… ahh ese acorde de apertura te pega justo en la nostalgia ¿no? (Entiendo que es si bemol mayor, si te lo estás preguntando).
Si desea dar a sus visitantes una dosis de Star Wars, este podría ser el camino a seguir. Pero recuerda las reglas de oro. Tenga cuidado al colocar texto crítico aquí, y si desea hacerlo, sería mejor permitir que el usuario controle la velocidad del desplazamiento del texto con el mouse.
Hablando de que…
7. Otorgue al usuario el control sobre las animaciones de texto en movimiento
Quizás la razón principal por la que el desplazamiento de texto es frustrante es que nos quita el control. Pero… si le devuelves al lector ese control, la mayoría de los problemas con el desplazamiento del texto desaparecerán.
Un excelente ejemplo de esto es un sitio web llamado Inicio explicado. A medida que te desplazas hacia abajo, el texto aparece y desaparece, explicando la complicada trama de la exitosa película de Christopher Nolan. A medida que se desplaza hacia arriba, el texto anterior vuelve a aparecer. Tienes el control total. Es bastante impresionante.
Pero, ¿cómo harías para construir algo como esto? Bueno, el sitio es efectivamente un sitio de página completa, donde cada “nivel” por el que pasan los personajes en la película está representado por una página completa diferente en el sitio. El texto que se desplaza dentro y fuera de la vista aparece cuando se desplaza dentro de cada página completa.
Algo así sería un caso de uso ideal para fullPage.js. fullPage es una biblioteca JS que te ayuda a crear, bueno, ¡sitios de página completa! Le brinda muchas formas de pasar sin problemas de una página a la siguiente, e incluso hay soporte para elementos de desplazamiento dentro de las páginas, que podría usar para crear efectos similares al sitio de Inception.
Y si usa WordPress, React o Vue, y está pensando “¿Funcionará junto con mis herramientas favoritas?”, La respuesta es sí, ¡sin problemas!
Eche un vistazo a algunos ejemplos de lo que puede hacer fullPage: ¿cómo le gustaría usar estas funciones en sus propios proyectos?
Artículos relacionados
Sobre el Autor:
warren davies es un desarrollador front-end con sede en el Reino Unido.
Puedes encontrar más de él en https://warrendavies.net
