Cómo marcar elementos en 2022 (mejores prácticas)
Publicado: 2022-08-23Este artículo discutirá las mejores formas de hacer elementos móviles de marquesina en el diseño web moderno.
Una marquesina es una sección infinita de texto y/o elemento visual (como imágenes) que se desplaza horizontalmente automáticamente.
A pesar de que el elemento HTML oficial <marquee> se depreció y se desaconsejó encarecidamente su uso, el efecto general del desplazamiento, los elementos continuos utilizados para darle vida a una página web está vivo y bien en 2022, apareciendo en muchos sitios web de moda.
Algunos incluso todavía usan el elemento Marquee, que todavía es compatible con todos los navegadores a pesar de que (nuevamente) se desaconseja su uso. Por ejemplo, aquí está el clásico "salvapantallas" de DVD que rebota creado con una marquesina HTML.
Esto no es inteligente, pero todavía funciona. Las razones para evitar el uso de este elemento en 2022 son claras:
- no es realmente accesible
- Está 100% depreciado y el soporte para él puede (y probablemente en algún momento) ser eliminado
- Para empezar, nunca fue un elemento HTML real (no forma parte de ningún estándar)
Sin embargo, siempre hemos sido fanáticos de las carpas en Isotropic.
Eche un vistazo a muchos de los sitios web de moda de Awwwards y verá texto, imágenes o una combinación de ambos moviéndose horizontalmente, así:
Esta es una marquesina de demostración
Por supuesto, nunca es una buena idea poner información de misión crítica en secciones animadas o de desplazamiento. Pero para algo como el ejemplo anterior, se ve genial, diferencia el sitio y lo hace memorable. Úselo sabiamente y con moderación.
Las marquesinas son geniales, incluso publicamos una herramienta útil que generará automáticamente una sección de estilo "ticker" de texto desplazable usando sombras de cuadro CSS. Es genial, pero creo que el enfoque discutido en este artículo es aún mejor.
El código para hacer esa demostración de marquesina proviene de este CodePen de Ryan Mulligan, que es (probablemente) la mejor manera de hacer un efecto de marquesina en 2022. También escribe sobre este código en su blog, https://ryanmulligan.dev/ blog/css-marquesina.
Es accesible (admite movimiento reducido), infinito, permite cualquier tipo de elemento html y es liviano y fácil de implementar.
También está hecho con 100% CSS y sin JS.
<div class="marquesina">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb=1.0.0>
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ix0''0=1&tb-al1.ix0''0=1&t4>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ix2'0=1&tq40=1&tq4>
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ix2'0=1&tq40=1&tq40=1.
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb=1.0.0>
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ix0''0=1&tb-al1.ix0''0=1&t4>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ix2'0=1&tq40=1&tq4>
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ix2'0=1&tq40=1&tq40=1.
</div>
</div>
<div class="marquesina marquesina--bordes">
<div class="marquee__group">
<p>Los perros de Unsplash</p>
<p aria-hidden="true">Los perros de Unsplash</p>
<p aria-hidden="true">Los perros de Unsplash</p>
</div>
<div aria-hidden="true" class="marquee__group">
<p>Los perros de Unsplash</p>
<p>Los perros de Unsplash</p>
<p>Los perros de Unsplash</p>
</div>
</div>
<div class="marquesina marquesina--reversa">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb''0=0.2.
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ix0.lib0=1b-al4=1.w&tlib0=1b-al4=1.
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ix20'0=1&tq40=1&tq40=1&tq40>
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb''0=0.2.
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ix0.lib0=1b-al4=1.w&tlib0=1b-al4=1.
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ix20'0=1&tq40=1&tq40=1&tq40>
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
</div> @importar URL("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
* {
tamaño de caja: cuadro de borde;
}
cuerpo {
min-altura: 100vh;
}
cuerpo {
--espacio: 2rem;
pantalla: cuadrícula;
alinear-contenido: centro;
desbordamiento: oculto;
brecha: var(--espacio);
ancho: 100%;
familia de fuentes: "Corben", system-ui, sans-serif;
tamaño de fuente: 1,5 rem;
altura de línea: 1,5;
}
.marquesina {
--duración: 60s;
--brecha: var(--espacio);
pantalla: flexible;
desbordamiento: oculto;
selección de usuario: ninguno;
brecha: var(--brecha);
transformar: sesgado Y (-3 grados);
}
.marquee__grupo {
contracción flexible: 0;
pantalla: flexible;
alinear elementos: centro;
justificar contenido: espacio alrededor;
brecha: var(--brecha);
ancho mínimo: 100%;
animación: desplazamiento var(--duración) lineal infinito;
}
@media (prefiere-movimiento-reducido: reducir) {
.marquee__grupo {
animación-reproducir-estado: en pausa;
}
}
.marquee__grupo img {
ancho máximo: abrazadera (10rem, 1rem + 28vmin, 20rem);
relación de aspecto: 1;
ajuste de objeto: cubierta;
borde-radio: 1rem;
}
.marquee__grupo p {
imagen de fondo: degradado lineal (
75 grados,
hsl (240 grados 70% 49%) 0%,
hsl (253 grados 70% 49%) 11%,
hsl (267 grados 70% 49%) 22%,
hsl (280 grados 71% 48%) 33%,
hsl (293 grados 71% 48%) 44%,
hsl (307 grados 71% 48%) 56%,
hsl (320 grados 71% 48%) 67%,
hsl (333 grados 72% 48%) 78%,
hsl (347 grados 72% 48%) 89%,
hsl (0 grados 73% 47%) 100%
);
-webkit-fondo-clip: texto;
-webkit-text-fill-color: transparente;
}
.marquee--bordes {
borde-bloque: 3px dodgerblue sólido;
bloque de relleno: 0,75 rem;
}
.marquee--reverse .marquee__group {
animación-dirección: inversa;
animación-retraso: calc(var(--duración) / -2);
}
Desplazamiento de @keyframes {
0% {
transformar: traducirX(0);
}
100% {
transform: translateX(calc(-100% - var(--gap)));
}
}
Echemos un vistazo a cómo se creó esto y por qué es tan bueno.
Aquí hay una descripción general, antes de ver todo el código:
- Podemos controlar fácilmente la velocidad y la dirección del efecto de desplazamiento. Para la velocidad, establecemos
.marquee--reverse. - Es modular: puede tener tantos grupos como desee envolviendo contenido en un div con la clase de
.marqueey el contenido interno con.marquee__group. - El dimensionamiento es receptivo y fluido, ya que utiliza variables CSS y abrazadera.
- Es accesible usando etiquetas aria y pausando si CSS prefiere-reducir-movimiento se establece en reducido.
- El movimiento es una animación CSS estándar que usa fotogramas clave (por lo que puede hacer una pausa al pasar el mouse si lo desea). No hay JS en absoluto.
- También es bastante copiar/pegar. Simplemente intercambie su contenido, implemente HTML y CSS, y tendrá una pequeña marquesina genial.
Está muy bien hecho y (en mi opinión) debería ser la forma estándar en que se implementa un efecto de marquesina en 2022.
Aquí está el HTML:
En la demo podemos ver tres marquesinas. El primero y el tercero se invierten con la clase de .marquee--reverse . Tienen una velocidad estándar y contienen imágenes.
El segundo (el del medio) es todo texto e implementa bordes con una clase personalizada. También tiene una duración más lenta establecida por el atributo de estilo: .
También notará que esencialmente hay duplicados dentro del div .marquee , que son iguales excepto con una etiqueta aria.
Esto es para hacer que la animación sea perfectamente infinita, al mismo tiempo que se puede adaptar a diferentes proporciones de ventana gráfica (más sobre esto cuando veamos el CSS).
Esto se hace accesible con aria-hidden="true" , que elimina el contenido duplicado del árbol de accesibilidad.
Además, las imágenes se sirven directamente desde Unsplash. Puede encontrar este recurso interesante: Cómo generar imágenes aleatorias por URL (Web Dev)
Con todo, es una estructura HTML simple y elegante.
Ahora veamos CSS
Y aquí está el CSS (extraído directamente de CodePen):
Podemos ver lo siguiente:
- Todo usa REM, variables y abrazadera, lo que significa que el efecto es fluido y reaccionará al tamaño de la pantalla y la configuración del navegador.
- La animación es 100% CSS. Esto se implementa con la línea "
animation: scroll var(--duration) linear infinite;" en.marquee__group. La animación es infinita, lineal y de desplazamiento con nombre. La duración raíz está controlada por la variable--duration, que se puede sobrescribir para controlar la velocidad de un grupo específico en el marcado HTML (mencionado anteriormente). - Scroll es una transformación básica, traduciendo X.
- Para invertir la animación, simplemente tenemos "
animation-direction: reverse;' en la.marquee--reverse .marquee__group. - Usamos calc y --gap para la mayor parte del espacio. Esto hace que las cosas sean fluidas y puede cambiar Gap para que se adapte a sus necesidades.
- Hay un efecto de sesgo (3%) que lo hace diagonal, que se puede quitar para que sea 100% horizontal.
- Es accesible y responsable, ya que no se moverá si prefiere-movimiento-reducido: reduce está configurado (aprende cómo probarlo aquí).
Básicamente, hace todo muy bien y es la mejor manera de implementar un efecto de marquesina de desplazamiento en 2022.
Para implementarlo, simplemente agregue el HTML a su página, intercambie el texto/las imágenes y agregue el CSS a sus estilos globales.
Puedes jugar con las variables, pero siendo realistas, esto es bastante plug and play... ¡no hay mucho que necesites cambiar!