So markieren Sie Elemente im Jahr 2022 (Best Practices)
Veröffentlicht: 2022-08-23In diesem Artikel werden die besten Möglichkeiten zur Erstellung beweglicher Festzeltelemente im modernen Webdesign erörtert.
Ein Marquee ist ein endloser Textabschnitt und/oder ein visuelles Element (wie Bilder), das automatisch horizontal gescrollt wird.
Obwohl das offizielle HTML-Element <marquee> abgewertet und von seiner Verwendung dringend abgeraten wird, ist der Gesamteffekt von scrollenden, kontinuierlichen Elementen, die zum Aufpeppen einer Webseite verwendet werden, im Jahr 2022 lebendig und gut und erscheint auf vielen trendigen Websites.
Einige verwenden sogar noch das Marquee-Element, das immer noch von allen Browsern unterstützt wird, obwohl (erneut) von der Verwendung abgeraten wird. Hier ist zum Beispiel der klassische Bouncing-DVD-"Bildschirmschoner", der mit einem HTML-Markierungszeichen erstellt wurde.
Das ist nicht schlau, aber es funktioniert trotzdem. Die Gründe, dieses Element im Jahr 2022 nicht zu verwenden, sind klar:
- Es ist nicht wirklich zugänglich
- Es ist zu 100 % abgeschrieben und die Unterstützung dafür kann (und wird wahrscheinlich irgendwann) entfernt werden
- Es war nie ein echtes HTML-Element (kein Teil eines Standards)
Allerdings waren wir bei Isotrop schon immer Fans von Partyzelten.
Werfen Sie einen Blick auf viele der trendigen Awwwards-Websites und Sie werden Text, Bilder oder eine Kombination aus beidem sehen, die sich horizontal bewegen, etwa so:
Dies ist ein Demo-Festzelt
Natürlich ist es nie eine gute Idee, missionskritische Informationen in scrollende oder animierte Abschnitte zu packen. Aber für etwas wie das obige Beispiel sieht es cool aus, differenziert die Seite und macht sie unvergesslich. Verwenden Sie es mit Bedacht und in Maßen.
Marquees sind so cool, dass wir sogar ein hilfreiches Tool veröffentlicht haben, das automatisch einen Lauftextabschnitt im „Ticker“-Stil mit Hilfe von CSS-Box-Schatten generiert. Es ist cool, aber ich denke, dass der in diesem Artikel beschriebene Ansatz noch besser ist.
Der Code für diese Festzeltdemo stammt von diesem CodePen von Ryan Mulligan, der (wahrscheinlich) der beste Weg ist, um im Jahr 2022 einen Festzelteffekt zu erzielen. Er schreibt auch über diesen Code in seinem Blog https://ryanmulligan.dev/ blog/css-Festzelt.
Es ist zugänglich (unterstützt bevorzugt reduzierte Bewegung), unendlich, lässt jede Art von HTML-Element zu und ist leichtgewichtig und einfach zu implementieren.
Es ist auch mit 100% CSS und ohne JS erstellt.
<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=rbq>
<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>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ix2
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=1&w=rb-1.alt>
</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=rbq>
<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>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ix2
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=1&w=rb-1.alt>
</div>
</div>
<div class="marquee marquee--borders">
<div class="marquee__group">
<p>Die Hunde von Unsplash</p>
<p aria-hidden="true">Die Hunde von Unsplash</p>
<p aria-hidden="true">Die Hunde von Unsplash</p>
</div>
<div aria-hidden="true" class="marquee__group">
<p>Die Hunde von Unsplash</p>
<p>Die Hunde von Unsplash</p>
<p>Die Hunde von 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 alt=0&w''0>
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib.w=1&1'0'
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib.w=1&1'0'=1&1'0'
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=1&w''=rb-1.alt>
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib.q=1&1'0'
</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 alt=0&w''0>
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib.w=1&1'0'
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib.w=1&1'0'=1&1'0'
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=1&w''=rb-1.alt>
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib.q=1&1'0'
</div>
</div> @Import-URL("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
* {
Box-Größe: Border-Box;
}
Karosserie {
Mindesthöhe: 100 Vh;
}
Karosserie {
--Leerzeichen: 2rem;
Anzeige: Raster;
Ausrichtungsinhalt: Mitte;
Überlauf versteckt;
Lücke: var(--Leerzeichen);
Breite: 100 %;
Schriftfamilie: "Corben", system-ui, serifenlos;
Schriftgröße: 1,5 rem;
Zeilenhöhe: 1,5;
}
.Festzelt {
--Dauer: 60s;
--gap: var(--space);
Anzeige: Flex;
Überlauf versteckt;
Benutzerauswahl: keine;
Lücke: var(--Lücke);
transformieren: schiefY(-3deg);
}
.marquee__group {
Flex-Schrumpf: 0;
Anzeige: Flex;
Ausrichtungselemente: Mitte;
rechtfertigen-Inhalt: Raum herum;
Lücke: var(--Lücke);
Mindestbreite: 100 %;
Animation: scroll var(--duration) linear unendlich;
}
@media (bevorzugt-reduzierte-bewegung: reduzieren) {
.marquee__group {
Animationswiedergabezustand: angehalten;
}
}
.marquee__group img {
max-Breite: Klemme (10rem, 1rem + 28vmin, 20rem);
Seitenverhältnis: 1;
objekttauglich: Abdeckung;
Grenzradius: 1rem;
}
.marquee__group p {
Hintergrundbild: linearer Farbverlauf (
75 Grad,
hsl(240 Grad 70 % 49 %) 0 %,
hsl (253 Grad 70 % 49 %) 11 %,
hsl (267 Grad 70 % 49 %) 22 %,
hsl(280 Grad 71 % 48 %) 33 %,
hsl (293 Grad 71 % 48 %) 44 %,
hsl (307 Grad 71 % 48 %) 56 %,
hsl(320 Grad 71 % 48 %) 67 %,
hsl (333 Grad 72 % 48 %) 78 %,
hsl (347 Grad 72 % 48 %) 89 %,
hsl (0 Grad 73 % 47 %) 100 %
);
-Webkit-Hintergrundclip: Text;
-Webkit-Text-Füllfarbe: transparent;
}
.marquee--borders {
Randblock: 3px solides dodgerblue;
Polsterblock: 0,75 rem;
}
.marquee--umgekehrt .marquee__group {
Animationsrichtung: rückwärts;
Animationsverzögerung: calc(var(--duration) / -2);
}
@keyframes scrollen {
0 % {
transformieren: translateX(0);
}
100% {
transform: translateX(calc(-100% - var(--gap)));
}
}
Werfen wir einen Blick darauf, wie dies entstanden ist und warum es so großartig ist.
Hier ist eine Übersicht, bevor wir uns den gesamten Code ansehen:
- Wir können die Geschwindigkeit und Richtung des Scrolling-Effekts leicht steuern. Auf Geschwindigkeit setzen wir
.marquee--reverse. - Es ist modular – Sie können so viele Gruppen haben, wie Sie möchten, indem Sie den Inhalt in ein div mit der Klasse
.marqueeund den inneren Inhalt mit.marquee__group. - Die Größenanpassung ist reaktionsschnell und flüssig, da CSS-Variablen und Klammern verwendet werden.
- Es ist zugänglich, indem Arien-Labels verwendet werden und pausiert wird, wenn CSS' Preferreds-Reduced-Motion auf Reduced eingestellt ist.
- Die Bewegung ist eine Standard-CSS-Animation, die Keyframes verwendet (so dass Sie beim Schweben anhalten können, wenn Sie möchten). Es gibt überhaupt kein JS.
- Es ist auch ziemlich Copy/Paste. Tauschen Sie einfach Ihre Inhalte aus, implementieren Sie HTML und CSS, und schon haben Sie ein cooles kleines Festzelt.
Es ist wirklich gut gemacht und (imo) sollte die Standardmethode sein, mit der ein Festzelteffekt im Jahr 2022 implementiert wird.
Hier ist der HTML-Code:
In der Demo sehen wir drei Festzelte. Die erste und die dritte werden mit der Klasse .marquee--reverse . Sie haben eine Standardgeschwindigkeit und enthalten Bilder.
Die zweite (mittlere) besteht ausschließlich aus Text und implementiert Rahmen mit einer benutzerdefinierten Klasse. Es hat auch eine langsamere Dauer, die durch das style-Attribut festgelegt wird: .
Sie werden auch feststellen, dass es innerhalb des .marquee Div im Wesentlichen Duplikate gibt, die bis auf ein Arie-Tag identisch sind.
Dies soll die Animation nahtlos unendlich machen und sich gleichzeitig an unterschiedliche Viewport-Verhältnisse anpassen lassen (mehr dazu, wenn wir uns das CSS ansehen).
Dies wird mit aria-hidden="true" zugänglich gemacht, wodurch der doppelte Inhalt aus dem Barrierefreiheitsbaum entfernt wird.
Außerdem werden die Bilder direkt von Unsplash bereitgestellt. Sie könnten diese Ressource interessant finden: So generieren Sie zufällige Bilder nach URL (Web Dev)
Alles in allem ist es eine elegante, einfache HTML-Struktur.
Schauen wir uns nun CSS an
Und hier ist das CSS (direkt aus dem CodePen gezogen):
Wir können Folgendes sehen:
- Alles verwendet REM, Variablen und Clamp, was bedeutet, dass der Effekt flüssig ist und auf Bildschirmgröße und Browsereinstellungen reagiert.
- Die Animation besteht zu 100 % aus CSS. Dies wird mit der Zeile "
animation: scroll var(--duration) linear infinite;" in.marquee__group. Die Animation ist unendlich, linear und hat eine benannte Schriftrolle. Die Stammdauer wird durch die Variable--durationgesteuert, die überschrieben werden kann, um die Geschwindigkeit einer bestimmten Gruppe im HTML-Markup (oben erwähnt) zu steuern. - Scroll ist eine grundlegende Transformation, die X übersetzt.
- Um die Animation umzukehren, haben wir einfach "
animation-direction: reverse;" in der Klasse.marquee--reverse .marquee__group. - Wir verwenden calc und --gap für den größten Teil des Abstands. Dies macht die Dinge flüssig und Sie können Gap an Ihre Bedürfnisse anpassen.
- Es gibt einen Schiefe-Effekt (3 %), der es diagonal macht, der entfernt werden kann, um es zu 100 % horizontal zu machen.
- Es ist zugänglich und verantwortungsbewusst, da es sich nicht bewegt, wenn es bevorzugt ist, dass reduzierte Bewegung: reduziert eingestellt ist (hier erfahren Sie, wie Sie dies testen können).
Im Grunde macht es alles wirklich gut und ist der beste Weg, um 2022 einen Laufschrift-ähnlichen Effekt zu implementieren.
Zur Implementierung fügen Sie einfach den HTML-Code zu Ihrer Seite hinzu, tauschen den Text/die Bilder aus und fügen das CSS zu Ihren globalen Stilen hinzu.
Sie können mit den Variablen spielen, aber realistisch gesehen ist das ziemlich Plug-and-Play ... Sie müssen nicht viel ändern!