Scroll Snap – polepszanie zachowania przesuwanych elementów


25 sierpnia 2021 / Michał Kortas


Czy spotkałeś się z elementami na stronach internetowych, których przesuwanie i przeglądanie na urządzeniu mobilnym wołało o pomstę do nieba? Na pewno tak. To choćby różnego rodzaju karty informacyjne lub zdjęcia w galerii. Istnieje jednak sposób, który znacznie uprzyjemni korzystanie z nich, a wymaga dodania jedynie kilku linijek w CSS i znany jest pod nazwą Scroll-Snap.

Jeśli nie możesz wyobrazić sobie o czym dokładnie mówię, spójrz na przygotowany przeze mnie przykład niewielkiej galerii zdjęć.

Jak widzisz, zdjęcia przesuwa się ociężale, nie ma w ich ruchu żadnej płynności. Nasze palce i oczy tego nie lubią 👀.

A co powiesz na to?

Znacznie lepiej, prawda? Zdjęcie przy przesunięciu ustawia się automatycznie do lewej krawędzi okna, ruch jest płynny i przyjemny.

Dodawanie płynnego przesunięcia elementu

W przykładzie utworzyłem prostą galerię zdjęć:

Efekt wizualny zapewniły następujące style CSS.

Po opaleniu kodu w przeglądarce zobaczysz galerię, która zachowuje się dokładnie jak na pierwszym, dołączonym wyżej filmie.

Widok galerii zdjęć

Widok galerii zdjęć

Użyty przeze mnie Scroll-Snap można używać w większości przeglądarek, choć nie zawsze w pełnym wymiarze.

Pierwszą rzeczą, którą trzeba dodać jest scroll-snap-type: x mandatory; dla kontenera z galerią zdjęć:

Mamy tu dwie kluczowe części:

  1. x lub y – oznaczają osie przesuwania. Możesz tutaj użyć również both dla obu osi.
  2. mandatory lub proximity – pierwsza, użyta przeze mnie opcja oznacza, że każde przesunięcie elementu sprowadzi go automatycznie do punktu końcowego. Proximity natomiast przesunie element jedynie wtedy, kiedy użytkownik przerwie przesuwanie bardzo blisko punktu końcowego.

Wspomniany punkt końcowy wyznaczamy za pomocą deklaracji CSS na przesuwanym elemencie. W moim przypadku był to box ze zdjęciem.

Powyższy atrybut może przyjąć następujące wartości:

  • none – punkt niewyznaczony,
  • start – przesuwanie zatrzyma się na początku elementu,
  • end – przesuwanie zatrzyma się na końcu elementu,
  • center – przesuwanie zatrzyma się na środku elementu.

Podsumowanie

W ten oto szybki sposób galeria zdjęć stała się bardziej przyjazna w użytkowaniu.


Tagi:


Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *