Przewijanie ekranów z wtyczką One Page Scroll

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:

<link href="css/onepage-scroll.css" rel="stylesheet" media="screen">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/jquery.onepage-scroll.min.js"></script>

<script>

</script>

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:

<div class="main">
    
    <section class="first">
        <h2>Sekcja 1</h2>
    </section>
   
    <section class="secound">
        <h2>Sekcja 2</h2>
    </section>

</div>

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:

.first {
	background: url(background1.jpg) top center;
	background-size: cover;	
}

.secound {
	background: url(background2.jpg) top center;
	background-size: cover;	
}

section {
 position: relative;
}

h2 {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 50%;
  margin-left: -1.9em;
  color: rgba(255, 255, 255, 0.7);
  font-size: 120px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

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:

$(document).ready(function() {

	$(".main").onepage_scroll();
		
});

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.

Spodobał Ci się artykuł? Dzięki naciśnięciu serduszka poniżej będę wiedział jakie treści tworzyć. Dzięki! :)

Jak zrobić chat Jak zrobić karuzelę z owlCarousel Tworzenie gry przeglądarkowej – #6 Statystyki gracza
View Comments
  • Ciekawe info, dzięki i pozdrawiam:)

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

  • Ś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.