close
bg5

Cześć 🙂 W dzisiejszym wpisie przy pomocy pluginu One Page Scroll napiszemy prostą stronę, na której podczas scrollowania będzie zachodził efekt przewijania ekranów. Taka strona składa się z dowolnej ilości sekcji, z których każda wypełnia cały ekran.

Czego potrzebujemy:

  • Biblioteka jQuery – niezbędna aby wtyczka mogła działać. Można ją pobrać z tej strony lub podłączyć z serwera zewnętrznego (w dalszej części posłużę się tą metodą)
  • Wtyczka One Page Scroll

Podpięcie jQuery i One Page Scroll:

Pobierz wtyczkę One Page Scroll z tej strony. Kliknij przycisk Download ZIP i pobierz paczkę. Następnie ją rozpakuj. Będziemy potrzebowali dwóch plików: onepage-scroll.css i jquery.onepage-scroll.min.js.

Przed zamykającym znacznikiem </head> dodaj następujące linijki:

W pierwszej linijce dołączamy style CSS dla wtyczki. W kolejnych linijkach podpinamy bibliotekę jQuery z zewnętrznego serwera oraz samą wtyczkę. Pamiętaj aby podać ścieżkę dostępu dostosowaną do struktury twoich plików. Poniżej wstawiamy znacznik script wewnątrz którego uruchomimy później wtyczkę.

 

Struktura HTML:

Jak widać struktura HTML jest bardzo prosta. W divie o klasie .main znajdują się dwa znaczniki section wraz z zawartością – nagłówkami. Te sekcje to tak naprawdę kolejne “ekrany”, które będziemy przewijać. Wewnątrz nich można korzystać z dowolnym znaczników html, bez żadnych ograniczeń 🙂

Style CSS:

Style CSS zależą już od tego jak chcesz żeby wyglądały poszczególne ekrany. Na potrzeby tego wpisu napisałem proste style. Przyjrzyjmy się im.

Do klas .first oraz .secound, czyli kolejnych ekranów przypisałem osobne tła. Chcąc aby tła bez względu na rozdzielczość wypełniały cały ekran ustawiłem background-size: cover. Poniżej ustawiłem jeszcze dla wszystkich sekcji position: relative.

Style dla nagłówka h2 dotyczą wyglądu i pozycji tego elementu na stronie.

Możemy teraz włączyć naszą wtyczkę.

Aktywacja wtyczki:

Wewnątrz wcześniej napisanego znacznik script dodajmy kod:

Odwołujemy się do klasy głównego kontenera (.main) i wywołujemy funkcję aktywującą wtyczkę.

I to wszystko! Przewijanie ekranów już działa 🙂

Przerabiany przykład znajdziesz tutaj.

 

 

  • Ciekawe info, dzięki i pozdrawiam:)

  • Klasa drugiej sekcji powinna nazywać się second 😉 Po za tym ok, fajny wpis, dzięki. Przydał się 🙂

  • RS

    Świetny blog. Przerabiasz bardzo fajne przykłady a co najważniejsze pokazujesz to w bardzo jasny i prosty sposób.

    Trzymaj tak dalej i będę czekał na więcej.