Comment marquer des éléments en 2022 (meilleures pratiques)
Publié: 2022-08-23Cet article discutera des meilleures façons de créer des éléments de chapiteau mobiles dans la conception Web moderne.
Un chapiteau est une section infinie de texte et/ou d'élément visuel (comme des images) qui défile automatiquement horizontalement.
Bien que l'élément HTML officiel <marquee> soit déprécié et fortement déconseillé d'être utilisé, l'effet global du défilement, les éléments continus utilisés pour pimenter une page Web sont bien vivants en 2022, apparaissant dans de nombreux sites Web à la mode.
Certains utilisent même encore l'élément Marquee, qui est toujours pris en charge par tous les navigateurs bien qu'il soit (encore) découragé d'être utilisé. Par exemple, voici le classique "économiseur d'écran" de DVD rebondissant créé avec un chapiteau HTML.
Ce n'est pas intelligent, mais ça marche quand même. Les raisons d'éviter d'utiliser cet élément en 2022 sont claires :
- Ce n'est pas vraiment accessible
- Il est amorti à 100 % et son support peut (et sera probablement à un moment donné) supprimé
- Ce n'était jamais un véritable élément HTML pour commencer (ne faisant partie d'aucune norme)
Cependant, nous avons toujours été fans des chapiteaux chez Isotropic.
Jetez un œil à de nombreux sites Web Awwwards à la mode et vous verrez du texte, des images ou une combinaison des deux se déplaçant horizontalement, comme ceci :
Ceci est un chapiteau de démonstration
Bien sûr, ce n'est jamais une bonne idée de mettre des informations essentielles à la mission dans des sections défilantes ou animées. Mais pour quelque chose comme l'exemple ci-dessus, cela a l'air cool, différencie le site et le rend mémorable. Utilisez-le à bon escient et avec modération.
Les chapiteaux sont tellement cool que nous avons même publié un outil utile qui générera automatiquement une section de style "ticker" de texte défilant à l'aide d'ombres de boîte CSS. C'est cool, mais je pense que l'approche discutée dans cet article est encore meilleure.
Le code pour créer cette démonstration de chapiteau provient de ce CodePen de Ryan Mulligan, qui est (probablement) le meilleur moyen de créer un effet de chapiteau en 2022. Il écrit également à propos de ce code dans son blog, https://ryanmulligan.dev/ blog/css-marquee.
Il est accessible (prend en charge préfère-mouvement réduit), infini, permet tout type d'élément html, et est léger et facile à mettre en œuvre.
Il est également fait avec 100% CSS et pas de JS.
<div class="marquee">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=1.2.2.2.2>
<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&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=1&qhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=1&q2.
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE4'0=8=8&qb-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=1.2.2.2.2>
<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&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=1&qhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=1&q2.
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE4'0=8=8&qb-1.
</div>
</div>
<div class="marquee marquee--borders">
<div class="marquee__group">
<p>Les chiens d'Unsplash</p>
<p aria-hidden="true">Les chiens d'Unsplash</p>
<p aria-hidden="true">Les chiens d'Unsplash</p>
</div>
<div aria-hidden="true" class="marquee__group">
<p>Les chiens d'Unsplash</p>
<p>Les chiens d'Unsplash</p>
<p>Les chiens d'Unsplash</p>
</div>
</div>
<div class="marquee marquee--reverse">
<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=1.2.1
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?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-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&ixlib=1&q-1.
<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=1.2.1
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?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-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&ixlib=1&q-1.
<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> @import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
* {
dimensionnement de la boîte : border-box ;
}
corps {
hauteur min : 100vh ;
}
corps {
--espace : 2rem ;
affichage : grille ;
aligner-contenu : centrer ;
débordement caché;
écart : var(--espace);
largeur : 100 % ;
font-family : "Corben", system-ui, sans-serif ;
taille de police : 1,5 rem ;
hauteur de ligne : 1,5 ;
}
.marquee {
--durée : 60s ;
--gap: var(--espace);
affichage : flexible ;
débordement caché;
sélection de l'utilisateur : aucune ;
écart : var(--écart);
transformer : skewY(-3deg) ;
}
.marquee__group {
flex-rétrécissement : 0 ;
affichage : flexible ;
align-items : center ;
justifier-contenu : espace autour ;
écart : var(--écart);
largeur min : 100 % ;
animation : défilement var(--duration) linéaire infini ;
}
@media (préfère-mouvement-réduit : réduire) {
.marquee__group {
animation-play-state : en pause ;
}
}
.marquee__group img {
largeur maximale : pince (10 rem, 1 rem + 28 vmin, 20 rem) ;
format d'image : 1 ;
conforme à l'objet : couverture ;
rayon de bordure : 1 rem ;
}
.marquee__group p {
image d'arrière-plan : dégradé linéaire (
75 degrés,
hsl(240deg 70% 49%) 0%,
hsl(253deg 70% 49%) 11%,
hsl(267deg 70% 49%) 22%,
hsl(280deg 71% 48%) 33%,
hsl(293deg 71% 48%) 44%,
hsl(307deg 71% 48%) 56%,
hsl (320deg 71% 48%) 67%,
hsl(333deg 72% 48%) 78%,
hsl(347deg 72% 48%) 89%,
hsl(0deg 73% 47%) 100%
);
-webkit-background-clip : texte ;
-webkit-text-fill-color : transparent ;
}
.marquee--borders {
border-block : 3 px solide Dodgerblue ;
bloc de rembourrage : 0,75 rem ;
}
.marquee--inverser .marquee__group {
direction de l'animation : inverse ;
délai d'animation : calc(var(--duration) / -2);
}
défilement @keyframes {
0 % {
transformer : translateX(0);
}
100 % {
transformer : translateX(calc(-100 % - var(--gap)) );
}
}
Voyons comment cela a été créé et pourquoi c'est si génial.
Voici un aperçu, avant de regarder tout le code :
- Nous pouvons facilement contrôler la vitesse et la direction de l'effet de défilement. Pour la vitesse, nous posons
.marquee--reverse. - C'est modulaire - vous pouvez avoir autant de groupes que vous le souhaitez en enveloppant le contenu dans une div avec la classe
.marqueeet le contenu interne avec.marquee__group. - Le dimensionnement est réactif et fluide car il utilise des variables CSS et une pince.
- Il est accessible en utilisant les étiquettes aria et en faisant une pause si CSS' prefers-reduced-motion est réglé sur "réduit".
- Le mouvement est une animation CSS standard qui utilise des images clés (vous pouvez donc faire une pause au survol si vous le souhaitez). Il n'y a pas de JS du tout.
- C'est aussi un joli copier/coller. Échangez simplement votre contenu, implémentez le HTML et le CSS, et vous aurez un petit chapiteau sympa.
C'est vraiment bien fait, et (imo) devrait être la manière standard d'implémenter un effet de chapiteau en 2022.
Voici le HTML :
Dans la démo, nous pouvons voir trois chapiteaux. Le premier et le troisième sont inversés avec la classe .marquee--reverse . Ils ont une vitesse standard et contiennent des images.
Le second (celui du milieu) est entièrement composé de texte et implémente des bordures avec une classe personnalisée. Il a également une durée plus lente définie par l'attribut style : .
Vous remarquerez également qu'il existe essentiellement des doublons dans la div .marquee , qui sont les mêmes sauf avec une balise aria.
Il s'agit de rendre l'animation infinie de manière transparente, tout en étant capable de s'adapter à différents ratios de fenêtre (plus à ce sujet lorsque nous regardons le CSS).
Ceci est rendu accessible avec aria-hidden="true" , qui supprime le contenu dupliqué de l'arborescence d'accessibilité.
De plus, les images sont servies directement depuis Unsplash. Vous pouvez trouver cette ressource intéressante : Comment générer des images aléatoires par URL (Web Dev)
Dans l'ensemble, c'est une structure HTML élégante et simple.
Regardons maintenant CSS
Et voici le CSS (tiré directement du CodePen):
Nous pouvons voir ce qui suit :
- Tout utilise REM, variables et pince, ce qui signifie que l'effet fluide et réagira à la taille de l'écran et aux paramètres du navigateur.
- L'animation est 100% CSS. Ceci est implémenté avec la ligne "
animation: scroll var(--duration) linear infinite;" dans.marquee__group. L'animation est infinie, linéaire et nommée défilement. La durée racine est contrôlée par la variable--duration, qui peut être écrasée pour contrôler la vitesse d'un groupe spécifique dans le balisage HTML (mentionné ci-dessus). - Scroll est une transformation de base, traduisant X.
- Pour inverser l'animation, nous avons simplement "
animation-direction: reverse;' dans la.marquee--reverse .marquee__group. - Nous utilisons calc et --gap pour la majorité de l'espacement. Cela rend les choses fluides et vous pouvez modifier Gap en fonction de vos besoins.
- Il y a un effet d'inclinaison (3%) qui le rend diagonal, qui peut être supprimé pour le rendre 100% horizontal.
- Il est accessible et responsable car il ne bougera pas si prefer-reduced-motion: reduce est défini (apprenez comment tester cela ici).
Fondamentalement, il fait tout très bien et constitue le meilleur moyen de mettre en œuvre un effet de chapiteau défilant en 2022.
Pour implémenter, il vous suffit d'ajouter le HTML à votre page, d'échanger le texte/les images et d'ajouter le CSS à vos styles globaux.
Vous pouvez jouer avec les variables, mais en réalité, c'est assez plug and play... il n'y a pas grand chose à changer !