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ęć:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="container"> <div class="image"> <img src="images/img1.jpg" alt="Mountain"> <h2>Mountain</h2> </div> <div class="image"> <img src="images/img2.jpg" alt="Clouds"> <h2>Clouds</h2> </div> <div class="image"> <img src="images/img3.jpg" alt="Village"> <h2>Village</h2> </div> <div class="image"> <img src="images/img4.jpg" alt="Water"> <h2>Water</h2> </div> <div class="image"> <img src="images/img5.jpg" alt="Flowers"> <h2>Flowers</h2> </div> </div> |
Efekt wizualny zapewniły następujące style CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | .container { width: calc(100vw-10rem); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 1rem; margin: 1rem; margin-top: 3rem; display: flex; overflow-x: auto; padding-right: 0.5rem; } .container > * { padding-left: 0.5rem; } .container > * { padding-top: 0.5rem; padding-bottom: 0.5rem; } h2 { font-family: Verdana, Geneva, Tahoma, sans-serif; margin: 0.5rem 0 0.5rem; } .container .image img { border-radius: 1rem; width: 70vw; object-fit: cover; } |
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ęć
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ęć:
1 2 3 4 5 6 7 8 9 10 11 | .container { width: calc(100vw-10rem); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 1rem; margin: 1rem; margin-top: 3rem; padding-right: 0.5rem; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } |
Mamy tu dwie kluczowe części:
- x lub y – oznaczają osie przesuwania. Możesz tutaj użyć również both dla obu osi.
- 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.
1 2 3 | .container .image { scroll-snap-align: start; } |
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.
- Demo do podglądu zamieściłem pod adresem: https://webroad.pl/demo/scroll-snap
- Cały kod dostępny jest na GitHub: https://github.com/webroad/scroll-snap
Tagi: css • scroll behavior • scroll-snap
