Cum să marcați elementele în 2022 (cele mai bune practici)
Publicat: 2022-08-23Acest articol va discuta cele mai bune modalități de a face elemente de marcaj în mișcare în designul web modern.
Un marcaj este o secțiune infinită de text și/sau element vizual (cum ar fi imaginile) care derulează automat pe orizontală.
În ciuda faptului că elementul HTML oficial <marquee> a fost depreciat și puternic descurajat de a fi utilizat, efectul general al derulării, elementele continue utilizate pentru a condimenta o pagină web este viu și bine în 2022, apărând pe multe site-uri web la modă.
Unii încă mai folosesc elementul Marquee, care este încă acceptat de toate browserele, deși (din nou) sunt descurajați să fie folosit. De exemplu, iată „screensaverul” DVD clasic, creat cu un marcaj HTML.
Acest lucru nu este inteligent, dar încă funcționează. Motivele pentru a evita utilizarea acestui element în 2022 sunt clare:
- Nu este chiar accesibil
- Este amortizat 100% și suportul pentru acesta poate (și probabil va fi eliminat la un moment dat).
- Nu a fost niciodată un element HTML real pentru început (nu face parte din niciun standard)
Cu toate acestea, am fost întotdeauna fani ai corturilor la Isotropic.
Aruncă o privire la multe dintre site-urile la modă Awwwards și vei vedea text, imagini sau o combinație a ambelor deplasându-se orizontal, astfel:
Acesta este un demonstrativ
Desigur, nu este niciodată o idee bună să puneți informații esențiale pentru misiune în secțiuni de derulare sau animate. Dar pentru ceva ca exemplul de mai sus, arată cool, diferențiază site-ul și îl face memorabil. Folosește-l cu înțelepciune și cu moderație.
Marcajele sunt atât de grozave, încât am publicat chiar și un instrument util care va genera automat o secțiune în stil „ticker” a textului derulat folosind umbrele casetei CSS. E mișto, dar cred că abordarea discutată în acest articol este și mai bună.
Codul pentru a face acea demonstrație a marcajului provine din acest CodePen de Ryan Mulligan, care este (probabil) cel mai bun mod de a face un efect de marcaj în 2022. El scrie și despre acest cod pe blogul său, https://ryanmulligan.dev/ blog/css-marquee.
Este accesibil (suporta prefers-reduced-motion), infinit, permite orice tip de element html și este ușor și ușor de implementat.
De asemenea, este realizat cu 100% CSS și fără 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=MnwzMjM4NDZ8MHwxfHJhbmRvbc870&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvb80&cs=tinysrgb=alt&f80f0800000000000000000000000000000000000000
<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=MnwzMjM4NDZ8MHwxfHJM4NDZ8MHwxfHJ0fx2NT=alt&hbx8mq&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJHJ08M8MHwxfHJhbmr&hp80f800000000000001
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJ08M4NDZ8MHwxfHJ04N=alt&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJ08M4NDZ8MHwxfHJ018000000000000000000000000000000001
</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=MnwzMjM4NDZ8MHwxfHJhbmRvbc870&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvb80&cs=tinysrgb=alt&f80f0800000000000000000000000000000000000000
<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=MnwzMjM4NDZ8MHwxfHJM4NDZ8MHwxfHJ0fx2NT=alt&hbx8mq&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJHJ08M8MHwxfHJhbmr&hp80f800000000000001
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJ08M4NDZ8MHwxfHJ04N=alt&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJ08M4NDZ8MHwxfHJ018000000000000000000000000000000001
</div>
</div>
<div class="marquee--borders">
<div class="marquee__group">
<p>Câinii din Unsplash</p>
<p aria-hidden="true">Câinii din Unsplash</p>
<p aria-hidden="true">Câinii din Unsplash</p>
</div>
<div aria-hidden="true" class="marquee__group">
<p>Câinii din Unsplash</p>
<p>Câinii din Unsplash</p>
<p>Câinii din Unsplash</p>
</div>
</div>
<div class="marquee--reverse">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbm4NDZ8MHwxfHJhbm488MHwxfHJhbm4ndz8MHwxfHJhbm48000000000000000000000000000000000000000000000000000000
<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=MnwzMjM4NDZ8MHwxfHJ02008M4NDZ8MHwxfHJ0f800000000000000000000000000000000000000000000000000000001
<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=MnwzMjM4NDZ8MHwxfHJhbm4NDZ8MHwxfHJhbm488MHwxfHJhbm4ndz8MHwxfHJhbm48000000000000000000000000000000000000000000000000000000
<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=MnwzMjM4NDZ8MHwxfHJ02008M4NDZ8MHwxfHJ0f800000000000000000000000000000000000000000000000000000001
<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");
* {
dimensionare cutie: chenar-cutie;
}
corp {
inaltime minima: 100vh;
}
corp {
--spațiu: 2rem;
afisare: grila;
aliniere-conținut: centru;
preaplin: ascuns;
decalaj: var(--spațiu);
latime: 100%;
font-family: "Corben", system-ui, sans-serif;
dimensiunea fontului: 1.5rem;
înălțimea liniei: 1,5;
}
.marquee {
--durata: 60s;
--gap: var(--space);
display: flex;
preaplin: ascuns;
user-select: niciunul;
decalaj: var(--gap);
transforma: skewY(-3deg);
}
.marquee__group {
flex-contractie: 0;
display: flex;
alinierea elementelor: centru;
justificare-conținut: spațiu-în jur;
decalaj: var(--gap);
lățime min: 100%;
animatie: scroll var(--duration) liniar infinit;
}
@media (preferă-reduced-motion: reduce) {
.marquee__group {
animație-play-stare: pauză;
}
}
.marquee__group img {
lățime maximă: clemă (10rem, 1rem + 28vmin, 20rem);
raport de aspect: 1;
potrivire obiect: acoperire;
hotar-raza: 1rem;
}
.marquee__grup p {
imagine de fundal: gradient liniar(
75 de grade,
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: text;
-webkit-text-fill-color: transparent;
}
.marquee--borduri {
chenar-bloc: 3px solid dodgerblue;
padding-block: 0.75rem;
}
.marquee--reverse .marquee__group {
animație-direcție: invers;
animație-întârziere: calc(var(--duration) / -2);
}
@keyframes defilare {
0% {
transforma: translateX(0);
}
100% {
transform: translateX(calc(-100% - var(--gap)));
}
}
Să aruncăm o privire la cum a fost creat și de ce este atât de grozav.
Iată o prezentare generală, înainte de a ne uita la tot codul:
- Putem controla cu ușurință viteza și direcția efectului de defilare. Pentru viteză, setăm
.marquee--reverse. - Este modular - puteți avea câte grupuri doriți prin împachetarea conținutului într-un div cu clasa
.marqueeși conținutul interior cu.marquee__group. - Dimensiunea este receptivă și fluidă, deoarece utilizează variabile CSS și clemă.
- Este accesibil folosind etichete de arie și pauză dacă CSS prefers-reduced-motion este setat la redus.
- Mișcarea este o animație CSS standard care utilizează cadre cheie (deci puteți face pauză la hover dacă doriți). Nu există deloc JS.
- De asemenea, este destul de copy/paste. Schimbați-vă pur și simplu conținutul, implementați HTML și CSS și veți avea un mic marcaj.
Este foarte bine făcut și (imo) ar trebui să fie modul standard în care este implementat efectul de marcaj în 2022.
Iată codul HTML:
În demonstrație putem vedea trei marcaje. Prima și a treia sunt inversate cu clasa .marquee--reverse . Au o viteză standard și conțin imagini.
Al doilea (cel din mijloc) este tot text și implementează chenare cu o clasă personalizată. De asemenea, are o durată mai lentă stabilită de atributul style: .
Veți observa, de asemenea, că există în esență duplicate în .marquee div, care sunt aceleași, cu excepția unei etichete aria.
Acest lucru este pentru a face animația perfect infinită, putând, de asemenea, să se adapteze la diferite rapoarte de vizualizare (mai multe despre asta când ne uităm la CSS).
Acest lucru este accesibil cu aria-hidden="true" , care elimină conținutul duplicat din arborele de accesibilitate.
De asemenea, imaginile sunt servite direct din Unsplash. S-ar putea să găsească această resursă interesantă: Cum se generează imagini aleatorii prin URL (Web Dev)
Una peste alta, este o structură HTML elegantă și simplă.
Acum să ne uităm la CSS
Și iată CSS-ul (tras direct din CodePen):
Putem vedea următoarele:
- Totul folosește REM, variabile și clemă, ceea ce înseamnă că efectul fluid și va reacționa la dimensiunea ecranului și la setările browserului.
- Animația este 100% CSS. Acest lucru este implementat cu linia "
animation: scroll var(--duration) linear infinite;" în.marquee__group. Animația este infinită, liniară și derulată cu nume. Durata rădăcinii este controlată de variabila--duration, care poate fi suprascrisă pentru a controla viteza unui anumit grup în marcajul HTML (menționat mai sus). - Defilarea este o transformare de bază, care traduce X.
- Pentru a inversa animația, avem pur și simplu "
animation-direction: reverse;' în.marquee--reverse .marquee__group. - Folosim calc și --gap pentru cea mai mare parte a spațierilor. Acest lucru face lucrurile fluide și puteți schimba Gap pentru a se potrivi nevoilor dvs.
- Există un efect oblic (3%) care o face diagonală, care poate fi îndepărtată pentru a o face 100% orizontală.
- Este accesibil și responsabil, deoarece nu se va mișca dacă prefers-reduced-motion: reduce este setat (aflați cum să testați asta aici).
Practic, face totul foarte bine și este cea mai bună modalitate de a implementa un efect asemănător unui marcaj de defilare în 2022.
Pentru implementare, pur și simplu adăugați codul HTML pe pagina dvs., schimbați textul/imaginile și adăugați CSS la stilurile dvs. globale.
Vă puteți juca cu variabilele, dar în mod realist, acest lucru este destul de plug and play... nu trebuie să schimbați prea multe!