Jak wyróżnić elementy w 2022 roku (najlepsze praktyki)

Opublikowany: 2022-08-23

W tym artykule omówimy najlepsze sposoby tworzenia ruchomych elementów markizy w nowoczesnym projektowaniu stron internetowych.

Markiza to nieskończona część tekstu i/lub elementu wizualnego (takiego jak obrazy), która automatycznie przewija się w poziomie.

Pomimo tego, że oficjalny element HTML <marquee> jest deprecjonowany i zdecydowanie zniechęcany do używania, ogólny efekt przewijania, ciągłe elementy używane do urozmaicenia strony internetowej są żywe i dobrze w 2022 roku, pojawiając się w wielu modnych witrynach.

Niektórzy nadal używają elementu Marquee, który jest nadal obsługiwany przez wszystkie przeglądarki, mimo że (ponownie) jest zniechęcany do używania. Oto przykład klasycznego „wygaszacza ekranu” z odbijającym się DVD, utworzonego za pomocą markizy HTML.

To nie jest sprytne, ale nadal działa. Powody, dla których należy unikać stosowania tego pierwiastka w 2022 roku, są jasne:

To nie jest naprawdę dostępne
Jest w 100% zdeprecjonowany, a wsparcie dla niego może (i prawdopodobnie w pewnym momencie zostanie) usunięte
To nigdy nie był prawdziwy element HTML (nie był częścią żadnego standardu)

HTML Marquee jest przestarzały - nie używaj go. — Wyjaśnienie dokumentów MDN, dlaczego nie należy używać tego elementu

Jednak zawsze byliśmy fanami namiotów imprezowych w Isotropic.

Spójrz na wiele modnych witryn Awwwards, a zobaczysz tekst, obrazy lub kombinację obu poruszających się w poziomie, na przykład:

To jest namiot demonstracyjny

Oczywiście nigdy nie jest dobrym pomysłem umieszczanie informacji o znaczeniu krytycznym dla misji w przewijanych lub animowanych sekcjach. Ale w przypadku czegoś takiego jak powyższy przykład wygląda fajnie, wyróżnia witrynę i sprawia, że jest niezapomniana. Używaj go mądrze i z umiarem.

Markizy są tak fajne, że opublikowaliśmy nawet przydatne narzędzie, które automatycznie wygeneruje sekcję przewijanego tekstu w stylu „ticker” za pomocą cieni CSS. Fajnie, ale myślę, że podejście omówione w tym artykule jest jeszcze lepsze.

Kod do stworzenia demonstracji markizy pochodzi z tego CodePen przez Ryana Mulligana, co jest (prawdopodobnie) najlepszym sposobem na uzyskanie efektu markizy w 2022 roku. Pisze również o tym kodzie na swoim blogu, https://ryanmulligan.dev/ blog/css-markiza.

Jest dostępny (obsługuje preferowane ruchy), nieskończony, pozwala na dowolny typ elementu html i jest lekki i łatwy do zaimplementowania.

Jest również wykonany w 100% z CSS i bez JS.

 <div class="marquee">
  <div class="marquee__group">
    <img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx=Mrq2&baltHx8f>''
    <img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8&08fHx3.2x8fH>
    <img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHix&NQ280fHx>
    <img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHQx&NQ280fHx>
    <img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHQx4M&Maltk0=1
  </div>

  <div aria-hidden="true" class="marquee__group">
    <img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx=Mrq2&baltHx8f>''
    <img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8&08fHx3.2x8fH>
    <img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHix&NQ280fHx>
    <img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHQx&NQ280fHx>
    <img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHQx4M&Maltk0=1
  </div>
</div>

<div class="marquee marquee--borders">
  <div class="marquee__group">
    <p>Psy Unsplash</p>
    <p aria-hidden="true">Psy Unsplash</p>
    <p aria-hidden="true">Psy Unsplash</p>
  </div>

  <div aria-hidden="true" class="marquee__group">
    <p>Psy Unsplash</p>
    <p>Psy Unsplash</p>
    <p>Psy 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=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHQqx4M&Maltk0=2.1
    <img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8f8f&x8fHx480xMNT-1
    <img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHQx4M&rg2Ntk0>
    <img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8=8fMfHx2TM8fH>
    <img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8f=8fHxyTM8fH>
  </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=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHQqx4M&Maltk0=2.1
    <img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8f8f&x8fHx480xMNT-1
    <img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHQx4M&rg2Ntk0>
    <img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8=8fMfHx2TM8fH>
    <img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8f=8fHxyTM8fH>
  </div>
</div>

 @import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");

* {
  rozmiar pudełka: obramowanie-pudełko;
}

ciało {
  wysokość min: 100vh;
}

ciało {
  --spacja: 2rem;

  wyświetlacz: siatka;
  wyrównaj zawartość: środek;
  przelew: ukryty;
  przerwa: var(--spacja);
  szerokość: 100%;
  rodzina czcionek: "Corben", systemowy interfejs użytkownika, bezszeryfowy;
  rozmiar czcionki: 1,5 rem;
  wysokość linii: 1,5;
}

.marque {
  --czas trwania: 60s;
  --gap: var(--spacja);

  wyświetlacz: elastyczny;
  przelew: ukryty;
  wybór użytkownika: brak;
  przerwa: var(--przerwa);
  transformacja: skośny Y(-3 stopnie);
}

.marquee__grupa {
  flex-skurcz: 0;
  wyświetlacz: elastyczny;
  wyrównaj-elementy: centrum;
  uzasadnić-treść: spacja-around;
  przerwa: var(--przerwa);
  minimalna szerokość: 100%;
  animacja: scroll var(--duration) liniowy nieskończony;
}

@media (preferuje zredukowany ruch: zmniejsz) {
  .marquee__grupa {
    stan odtwarzania animacji: wstrzymany;
  }
}

.marquee__grupa img {
  max szerokość: zacisk(10rem, 1rem + 28vmin, 20rem);
  współczynnik proporcji: 1;
  dopasowanie do obiektu: okładka;
  promień graniczny: 1rem;
}

.marquee__group p {
  obraz w tle: gradient liniowy (
    75 stopni,
    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(333stopnie 72% 48%) 78%,
    hsl(347 stopni 72% 48%) 89%,
    hsl(0deg 73% 47%) 100%
  );
  -webkit-background-clip: tekst;
  -webkit-text-fill-color: przezroczysty;
}

.marquee--obramowania {
  border-block: 3px stałe dodgerblue;
  wyściółka: 0,75rem;
}

.marquee--reverse .marquee__group {
  kierunek animacji: rewers;
  opóźnienie animacji: calc(var(--duration) / -2);
}

@klatki kluczowe przewijanie {
  0% {
    przekształcenie: przetłumaczX(0);
  }

  100% {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

Przyjrzyjmy się, jak to zostało stworzone i dlaczego jest takie wspaniałe.

Oto przegląd, zanim przyjrzymy się całemu kodowi:

W łatwy sposób możemy kontrolować prędkość i kierunek efektu przewijania. Dla szybkości ustawiamy a jako kierunek używamy klasy .marquee--reverse .
Jest modułowy — możesz mieć tyle grup, ile chcesz, umieszczając zawartość w div z klasą .marquee i wewnętrzną zawartość za pomocą .marquee__group .
Zmiana rozmiaru jest responsywna i płynna, ponieważ wykorzystuje zmienne CSS i klamrę.
Jest dostępny za pomocą etykiet aria i wstrzymywania, jeśli CSS preferuje zredukowany ruch jest ustawiony na zredukowany.
Ruch to standardowa animacja CSS, która wykorzystuje klatki kluczowe (możesz więc zatrzymać się po najechaniu myszą, jeśli chcesz). W ogóle nie ma JS.
Jest też całkiem niezły kopiuj/wklej. Po prostu zamień swoją zawartość, zaimplementuj HTML i CSS, a będziesz miał fajny mały namiot.

To naprawdę dobrze zrobione i (imo) powinno być standardowym sposobem implementacji efektu markizy w 2022 roku.

Oto kod HTML:

<div class="marquee"> <div class="marquee__group"> <img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8XMHbMhmxfHvMjM4NDZ8XMHbMwxf -1.2.1&q=80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8XHbMhmxfHwxf .1&q=80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8XHkNT8MfXfxfHJ0 =80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJib2XfxHbmfvxfHJix2xHbmfvxfHJixxHbmfv =400' alt=''> <img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx 8fHx8fHx8fDE2NTk0MDQ4MDE&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-1548199973-03cce0bbc87b?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&=.rc=400'g.s. -1583511666445-775f1f2116f5?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&fm. -c25e88ac05ce?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1=. ?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=. =ent roponośny&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''> ="-marqueed class="-marqueed"</-div> : 100s"> <div class="marquee__group"> <p>Psy unsplash</p> <p aria-hidden="true">Psy unsplash</p> <p aria-hidden="true" >Psy Unsplash</p> </div> <div aria-hidden="true" class="marquee__group"> <p>Psy Unsplash</p> <p>Psy Unsplash</p> <p>Psy unsplash</p> </div> </div> <div class="marquee marquee--reverse"> <div class="marquee__group"> <img src='https://images. unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MD=&q=80.ws&w&wxid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MD=lib=80. com/photo-1518378188025-22bd89516ee2?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ='g&ws.2.1&ix>https://image s.unsplash.com/photo-1571772805064-207c8435df79?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2b=. unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0&q=400's. com/photo-1508948956644-0017e845d797?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUy=MDUyM&w-2.1=&ix> 'class=</div-alt=&ixq=” "marquee__group"> <img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbm8&HQx4DE80xfHfx.2.1 '> <img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXfNT8fHx8 0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixidxMfDXFDZh8MH2 rb-1.2.1&q=80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDEXHNTbHmf0 1.2.1&q=80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropia&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8XMhNT8MfRxfHDU8 1&q=80&w=400' alt=''> </div> </div>

W demie widzimy trzy markizy. Pierwszy i trzeci są odwrócone z klasą .marquee--reverse . Mają standardową prędkość i zawierają obrazy.

Drugi (środkowy) to cały tekst i implementuje obramowania z niestandardową klasą. Ma również wolniejszy czas trwania ustawiany przez atrybut stylu: .

Zauważysz również, że w div .marquee są zasadniczo duplikaty, które są takie same, z wyjątkiem znacznika aria.

Dzięki temu animacja będzie płynnie nieskończona, a jednocześnie będzie w stanie dostosować się do różnych współczynników widoku (więcej na ten temat, gdy spojrzymy na CSS).

Jest to dostępne za pomocą aria-hidden="true" , która usuwa zduplikowaną treść z drzewa dostępności.

Ponadto obrazy są wyświetlane bezpośrednio z Unsplash. Może Cię zainteresować ten zasób: Jak wygenerować losowe obrazy według adresu URL (Web Dev)

Podsumowując, jest to elegancka, prosta struktura HTML.

Spójrzmy teraz na CSS

A oto CSS (wyciągnięty bezpośrednio z CodePen):

@import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap"); * { rozmiar pudełka: obramowanie-pudełko; } body { min-wysokość: 100vh; } .demo_marquee-wrap { --demo-marquee_space: 2rem; wyświetlacz: siatka; wyrównaj zawartość: środek; przelew: ukryty; przerwa: var(--demo-marquee_space); szerokość: 100%; rodzina czcionek: "Corben", systemowy interfejs użytkownika, bezszeryfowy; rozmiar czcionki: 1,5 rem; wysokość linii: 1,5; } .marquee { --demo-marquee_duration: 60s; --demo-marquee_gap: var(--demo-marquee_space); wyświetlacz: elastyczny; przelew: ukryty; wybór użytkownika: brak; przerwa: var(--demo-marquee_gap); transformacja: skośny Y(-3 stopnie); } .marquee__group { flex-shrink: 0; wyświetlacz: elastyczny; wyrównaj-elementy: centrum; uzasadnić-treść: spacja-around; przerwa: var(--demo-marquee_gap); minimalna szerokość: 100%; animacja: scroll var(--demo-marquee_duration) liniowy nieskończony; } @media (prefers-reduced-motion: Reduce) { .marquee__group { animacja-stan odtwarzania: wstrzymana; } } .marquee__group img { max-width: clamp(10rem, 1rem + 28vmin, 20rem); współczynnik proporcji: 1; dopasowanie do obiektu: okładka; promień graniczny: 1rem; } .marquee__group p { kolor:#29303e; } .marquee--borders { border-block: 3px solid #29303e; wyściółka: 0,75rem; } .marquee--reverse .marquee__group { kierunek animacji: reverse; opóźnienie animacji: calc(var(--demo-marquee_duration) / -2); } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% - var(--demo-marquee_gap))); } }

Możemy zobaczyć:

Wszystko korzysta z REM, zmiennych i zacisku, co oznacza, że efekt płynie i będzie reagował na rozmiar ekranu i ustawienia przeglądarki.
Animacja jest w 100% CSS. Jest to zaimplementowane za pomocą wiersza " animation: scroll var(--duration) linear infinite; " w .marquee__group . Animacja jest nieskończona, liniowa i ma nazwę przewijania. Czas trwania root jest kontrolowany przez zmienną --duration , którą można nadpisać, aby kontrolować szybkość określonej grupy w znacznikach HTML (wspomnianych powyżej).
Scroll to podstawowa transformacja, tłumacząca X.
Aby odwrócić animację, po prostu mamy " animation-direction: reverse; " w klasie .marquee--reverse .marquee__group .
W większości odstępów używamy funkcji calc i --gap. To sprawia, że wszystko jest płynne i możesz dostosować Gap do swoich potrzeb.
Występuje efekt pochylenia (3%), który sprawia, że jest przekątny, który można usunąć, aby był w 100% poziomy.
Jest dostępny i odpowiedzialny, ponieważ nie będzie się poruszał, jeśli preferuje-zmniejszony ruch: jest ustawiony (dowiedz się, jak to przetestować tutaj).

Zasadniczo robi wszystko naprawdę dobrze i jest najlepszym sposobem na wdrożenie efektu przewijania przypominającego markizę w 2022 roku.

Aby zaimplementować, po prostu dodaj kod HTML do swojej strony, zamień tekst/obrazy i dodaj CSS do swoich globalnych stylów.

Możesz bawić się zmiennymi, ale realistycznie jest to dość plug and play... nie musisz wiele zmieniać!