Come selezionare gli elementi nel 2022 (migliori pratiche)
Pubblicato: 2022-08-23Questo articolo discuterà i modi migliori per creare elementi di selezione in movimento nel moderno web design.
Un tendone è una sezione infinita di testo e/o elemento visivo (come le immagini) che scorre automaticamente in orizzontale.
Nonostante l'elemento HTML <marquee> ufficiale sia stato deprezzato e fortemente sconsigliato dall'uso, l'effetto complessivo dello scorrimento, elementi continui utilizzati per rendere più piccante una pagina Web è vivo e vegeto nel 2022, apparendo in molti siti Web alla moda.
Alcuni usano ancora l'elemento Marquee, che è ancora supportato da tutti i browser nonostante (di nuovo) sia sconsigliato di essere utilizzato. Ad esempio, ecco il classico "salvaschermo" del DVD rimbalzante creato con un riquadro di selezione HTML.
Questo non è intelligente, ma funziona ancora. Le ragioni per evitare di utilizzare questo elemento nel 2022 sono chiare:
- Non è davvero accessibile
- È deprezzato al 100% e il supporto per esso può (e probabilmente sarà a un certo punto) essere rimosso
- Non è mai stato un vero elemento HTML per cominciare (non fa parte di nessuno standard)
Tuttavia, siamo sempre stati fan dei tendoni per feste a Isotropic.
Dai un'occhiata a molti dei siti Web alla moda di Awwwards e vedrai testo, immagini o una combinazione di entrambi che si muovono orizzontalmente, in questo modo:
Questo è un tendone dimostrativo
Naturalmente, non è mai una buona idea inserire informazioni mission-critical in sezioni a scorrimento o animate. Ma per qualcosa come l'esempio sopra, sembra interessante, differenzia il sito e lo rende memorabile. Usalo con saggezza e con moderazione.
I tendoni sono così fantastici che abbiamo persino pubblicato uno strumento utile che genererà automaticamente una sezione di testo scorrevole in stile "ticker" utilizzando le ombre dei riquadri CSS. È fantastico, ma penso che l'approccio discusso in questo articolo sia ancora migliore.
Il codice per realizzare quella demo tendone è tratto da questo CodePen di Ryan Mulligan, che è (probabilmente) il modo migliore per creare un effetto tendone nel 2022. Scrive anche di questo codice nel suo blog, https://ryanmulligan.dev/ blog/css-marquee.
È accessibile (supporta prefers-reduced-motion), infinito, consente qualsiasi tipo di elemento html ed è leggero e facile da implementare.
È anche realizzato con CSS al 100% e nessun 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&q=1.2'>00& alb=1&q=1.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&x'2lib='rb-1='2lib=8'0'.
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&x2'0MDQ4MDE&ix2'01='rb-1='2lib='rb-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&q=1.2'>00& alb=1&q=1.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&x'2lib='rb-1='2lib=8'0'.
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&x2'0MDQ4MDE&ix2'01='rb-1='2lib='rb-1'
</div>
</div>
<div class="marquee marquee--borders">
<div class="marquee__group">
<p>I cani di Unsplash</p>
<p aria-hidden="true">I cani di Unsplash</p>
<p aria-hidden="true">I cani di Unsplash</p>
</div>
<div aria-hidden="true" class="marquee__group">
<p>I cani di Unsplash</p>
<p>I cani di Unsplash</p>
<p>I cani di Unsplash</p>
</div>
</div>
<div class="marquee tendone--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=1&q=1.2'>&ixlib=1&q=1.2.'
<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&x2lib='01='rb-1='2lib='rb-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=1&q=1.2'>&ixlib=1&q=1.2.'
<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&x2lib='01='rb-1='2lib='rb-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");
* {
formato scatola: bordo-scatola;
}
corpo {
altezza minima: 100vh;
}
corpo {
--spazio: 2rem;
visualizzazione: griglia;
align-content: centro;
overflow: nascosto;
gap: var(--spazio);
larghezza: 100%;
famiglia di caratteri: "Corben", system-ui, sans-serif;
dimensione del carattere: 1,5 rem;
altezza della linea: 1,5;
}
.tendone {
--durata: 60s;
--gap: var(--space);
display: flessibile;
overflow: nascosto;
user-select: nessuno;
gap: var(--gap);
trasforma: skewY(-3deg);
}
.marquee__group {
termoretraibile: 0;
display: flessibile;
allineare-elementi: centro;
giustificare-contenuto: spazio-intorno;
gap: var(--gap);
larghezza minima: 100%;
animazione: scroll var(--duration) linear infinite;
}
@media (preferisce-ridotto-movimento: riduci) {
.marquee__group {
stato di riproduzione dell'animazione: in pausa;
}
}
.marquee__group img {
larghezza massima: morsetto (10 rem, 1 rem + 28 vmin, 20 rem);
proporzioni: 1;
adatto all'oggetto: copertina;
raggio di confine: 1rem;
}
.marquee__group p {
immagine di sfondo: gradiente lineare(
75 gradi,
hsl(240 gradi 70% 49%) 0%,
hsl(253 gradi 70% 49%) 11%,
hsl(267 gradi 70% 49%) 22%,
hsl(280 gradi 71% 48%) 33%,
hsl(293 gradi 71% 48%) 44%,
hsl(307 gradi 71% 48%) 56%,
hsl (320 gradi 71% 48%) 67%,
hsl(333 gradi 72% 48%) 78%,
hsl(347 gradi 72% 48%) 89%,
hsl(0 gradi 73% 47%) 100%
);
-clip-sfondo-webkit: testo;
-webkit-text-fill-color: trasparente;
}
.marquee--bordi {
border-block: 3px solid Dodgerblue;
blocco di riempimento: 0,75 rem;
}
.marquee--reverse .marquee__group {
direzione dell'animazione: retromarcia;
animazione-ritardo: calc(var(--duration) / -2);
}
@fotogrammi chiave scorrere {
0% {
trasformare: translateX(0);
}
100% {
trasformare: translateX(calc(-100% - var(--gap)));
}
}
Diamo un'occhiata a come è stato creato e perché è così eccezionale.
Ecco una panoramica, prima di guardare tutto il codice:
- Possiamo facilmente controllare la velocità e la direzione dell'effetto di scorrimento. Per la velocità, abbiamo impostato
.marquee--reverse. - È modulare: puoi avere tutti i gruppi che desideri avvolgendo il contenuto in un div con la classe di
.marqueee il contenuto interno con.marquee__group. - Il dimensionamento è reattivo e fluido in quanto utilizza variabili CSS e clamp.
- È accessibile usando le etichette dell'aria e mettendo in pausa se CSS's prefers-reduced-motion è impostato su ridotto.
- Il movimento è un'animazione CSS standard che utilizza i fotogrammi chiave (quindi puoi mettere in pausa al passaggio del mouse se lo desideri). Non c'è affatto JS.
- È anche un bel copia/incolla. Sostituisci semplicemente i tuoi contenuti, implementa HTML e CSS e avrai un piccolo e fantastico tendone.
È davvero ben fatto e (imo) dovrebbe essere il modo standard in cui viene implementato un effetto tendone nel 2022.
Ecco l'HTML:
Nella demo possiamo vedere tre tendoni. Il primo e il terzo sono invertiti con la classe di .marquee--reverse . Hanno una velocità standard e contengono immagini.
Il secondo (quello centrale) è tutto testo e implementa i bordi con una classe personalizzata. Ha anche una durata più lenta impostata dall'attributo style: .
Noterai anche che ci sono essenzialmente duplicati all'interno del div .marquee , che sono gli stessi tranne che con un tag aria.
Questo per rendere l'animazione perfettamente infinita, pur essendo in grado di adattarsi a diversi rapporti di visualizzazione (ne parleremo di più quando osserviamo il CSS).
Questo è reso accessibile con aria-hidden="true" , che rimuove il contenuto duplicato dall'albero di accessibilità.
Inoltre, le immagini vengono fornite direttamente da Unsplash. Potresti trovare interessante questa risorsa: Come generare immagini casuali per URL (Web Dev)
Tutto sommato, è una struttura HTML semplice ed elegante.
Ora diamo un'occhiata ai CSS
Ed ecco il CSS (tratto direttamente dal CodePen):
Possiamo vedere quanto segue:
- Tutto utilizza REM, variabili e clamp, il che significa che l'effetto fluido e reagirà alle dimensioni dello schermo e alle impostazioni del browser.
- L'animazione è al 100% CSS. Questo è implementato con la linea "
animation: scroll var(--duration) linear infinite;" in.marquee__group. L'animazione è infinita, lineare e denominata scroll. La durata radice è controllata dalla variabile--duration, che può essere sovrascritta per controllare la velocità di un gruppo specifico nel markup HTML (menzionato sopra). - Scroll è una trasformazione di base, che traduce X.
- Per invertire l'animazione, abbiamo semplicemente "
animation-direction: reverse;' nella classe.marquee--reverse .marquee__group. - Stiamo utilizzando calc e --gap per la maggior parte della spaziatura. Questo rende le cose fluide e puoi cambiare Gap in base alle tue esigenze.
- C'è un effetto di inclinazione (3%) che lo rende diagonale, che può essere rimosso per renderlo orizzontale al 100%.
- È accessibile e responsabile in quanto non si muoverà se preferisce-ridotto-movimento: è impostato ridurre (scopri come testarlo qui).
Fondamentalmente, fa tutto davvero bene ed è il modo migliore per implementare un effetto simile a un tendone a scorrimento nel 2022.
Per implementarlo, aggiungi semplicemente l'HTML alla tua pagina, sostituisci il testo/le immagini e aggiungi il CSS ai tuoi stili globali.
Puoi giocare con le variabili, ma realisticamente questo è abbastanza plug and play... non c'è molto che devi cambiare!