Infinite horizontal scroll – czyli jak przewijać w poziomie

Infinite horizontal scroll – czyli jak przewijać w poziomie

Dzisiaj chciałbym się podzielić czymś co w środowisku programistów określane jest jako „infinite horizontal scroll”. Podstawowym założeniem było uzyskanie efektu nieskończonego przewijania strony w poziomie. Do przygotowania tego efektu zainspirowało mnie portfolio pana Andersa Drage.

Jak działa infinite horizontal scroll?

Wyobraź sobie, że masz kilkanaście elementów ułożonych obok siebie, jeden po drugim. Co zrobić aby po przewinięciu do ostatniego elementu znów pojawił się pierwszy? Okazuje się, że wystarczy na początku sklonować wszystkie elementy a później na odpowiednim zdarzeniu zmieniać tylko ich położenie.

Ponieważ zależało mi aby skrypt obsługiwał touchpady, wykorzystałem plugin jQuery MouseWheel. Przy każdej zmianie wartości scrollLeft następuje detekcja kierunku – lewo lub prawo oraz momentu osiągnięcia ostatniego elementu. Kluczem do zrozumienia tego przykładu jest wyobraźnia.

Poniższy rysunek obrazuje to co dzieje się z klonem elementów w momencie dotarcia do prawej krawędzi:

W momencie dotarcia do prawej krawędzi wartość scrollLeft jest ustawiana na 0. Elementy podstawowe wyrzucane są poza widoczny obszar ekranu. Elementy wcześniej sklonowane są ustawiane w pozycji, w której nastąpiło zdarzenie – tzn. w pozycji końcowej elementów podstawowych. Wykonaliśmy tutaj niezauważalny dla oka przeskok. Te właśnie przeskoki pozwalają stworzyć efekt nieskończonego przewijania.

Czas również obsłużyć przewijanie w lewo. Poniżej prezentuję analogiczny schemat działania w przypadku osiągnięcia lewej krawędzi:

Odpowiednio dla tej sytuacji zmienia się położenie elementów podstawowych i sklonowanych oraz wartość scrollLeft ustawiana jest na maksimum.

Zachęcam do przeglądania demo a także kodu źródłowego i wspólnego rozwijania swoich umiejętności. Nie po raz pierwszy i nie ostatni pokazuję, że na pozór trudne zadanie, można zrealizować w dość prosty sposób.


Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.