Parallax Scrolling - nowy trend w designie stron i blogów [TUTORIAL]

przez - października 01, 2014


Jak zapewne zauważyłeś, nasz blog zmienił diametralnie swój design. Jednak wygląd strony wcale nie oznacza, że zrezygnowaliśmy z bloga. Zastosowaliśmy jedynie efekt "Parallax Scrolling", który jest od niedawna bardzo modny oraz coraz powszechniej używany przy tworzeniu stron www i blogów.
Co to jest efekt Parallax Scrolling?

Parallax Scrolling jest to angielska nazwa, którą po polsku można przetłumaczyć, jako efekt przewijania Paralaksy (i jak to odmienić?! Paralaksalnego?) . Inaczej efekt płynnego przewijania strony, które tworzy wrażenie przestrzeni oraz "głębi". Po użyciu rolki myszy, wydaje nam się, że zawartość strony (tekst i grafiki) "płyną" po naszym ekranie. Przy przewijaniu w dół, dolne tło "najeżdża" na górne.
Nasza mądra Wikipedia mówi, że:
Paralaksa to efekt niezgodności różnych obrazów tego samego obiektu obserwowanych z różnych kierunków. W szczególności paralaksa odnosi się do jednoczesnego obserwowania obiektów leżących w różnych odległościach od obserwatora lub urządzenia obserwującego, a objawia się tym, że obiekty te na obu obrazach są oddalone od siebie o odmienną odległość kątową lub też nachodzą na siebie na tych obrazach w odmiennym stopniu.

Trzeba przyznać, że ciekawie wyszedł nam opis efektu Parallax, z pewnością mało profesjonalnie, za co programiści nas "ubiją" :P, ale ważne, że w miarę prosto i zrozumiale. Z resztą, to co ciężko opisać, najlepiej zobaczyć. Tak więc obejrzyj sobie prostą stronę z podstawowym efektem Parallax Scrolling (tak, tak można go rozbudować... :P) i oceń, czy podoba ci się taki trend w nowoczesnym designie stron.
Zobacz Demo

Zobaczyłeś przykład zastosowania omawianego efektu, więc teraz pewnie żądasz kodu, który zrobił takie cuda... Ba! Najlepiej pewnie gotowego html-a całej strony. Spoko. Łap!
<section class="module parallax parallax-1">
  <div class="container">
    <h1>Relaks</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Zrelaksuj się...</h2>
    <p>...przy filiżance gorącej kawy...</p>
  </div>
</section>

<section class="module parallax parallax-2">
  <div class="container">
    <h1>Wolność</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Poczuj wolność...</h2>
    <p>...biegając boso po lesie...</p>
  </div>
</section>

<section class="module parallax parallax-3">
  <div class="container">
    <h1>Sukces</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Osiągnij sukces...</h2>
    <p>...wdrapując się na szczyt...</p>
  </div>
</section>

<section class="module parallax parallax-4">
  <div class="container">
    <h1>Blokotek</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Blogowe szablony, dodatki i tutoriale...</h2>
    <p>...To właśnie dzięki nam obejrzałeś efekt płynnego przewijania strony, tzw. "Parallax Scrolling"... Wejdź na <a href="http://www.blokotek.pl">Blokotek.pl</a></p>
  </div>
</section>

<style>
/* ============================================================
  PRIMARY STRUCTURE
============================================================ */
.container {
  max-width: 960px;
  margin: 0 auto;
}
/* ============================================================
  SECTIONS
============================================================ */
section.module:last-child {
  margin-bottom: 0;
}
section.module h2 {
  margin-bottom: 40px;
  font-family: "Arial", serif;
  font-size: 30px;
  text-align: center;
}
section.module p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
  text-align: center;
}
section.module p:last-child {
  margin-bottom: 0;
}
section.module.content {
  padding: 40px 0;
}
section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}
section.module.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  background-image: url("http://4.bp.blogspot.com/-Yx-a_KbJTGM/VCAuCmYeR9I/AAAAAAAAEv8/qDgF-Ha3rcM/s0/QoR8Bv1S2SEqH6UcSJCA_Tea.jpg");
}
section.module.parallax-2 {
  background-image: url("http://3.bp.blogspot.com/-ZR_4xn2GPnw/VCAyaHTKJoI/AAAAAAAAEwo/1AOlFriwFNE/s0/kVEPcWcfSA2tgOpRz9Za__DSC0765.jpg");
}
section.module.parallax-3 {
  background-image: url("http://4.bp.blogspot.com/-SjqykJOJDFI/VCAxuXlK1rI/AAAAAAAAEwg/fgns2zKp13U/s0/nQZcA7PRTyuduZPSZQ88_wanderlust.jpg");
}
section.module.parallax-4 {
  background-image: url("http://3.bp.blogspot.com/-5SzhUKhezmE/VCAvTcZo5OI/AAAAAAAAEwI/GfdP-VrxJ-k/s0/awhCbhLqRceCdjcPQUnn_IMG_0249.jpg");
}

@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px;
  }
  section.module p {
    font-size: 20px;
  }
  section.module.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    font-size: 160px;
  }
}
</style>

Jako, że ten poradnik przeznaczony jest dla zaawansowanych webmasterów, nie będziemy tłumaczyć każdej linijki zamieszczonego kodu (o zgrozo, by życia zabrakło :P). Skupimy się raczej na naszym efekcie przewijania paralaksalnego (opatentujemy tę nazwę, serio :P). No więc, które deklaracje w arkuszu stylu odpowiadają za stworzenie naszej Paralaksy? Będą to deklaracje dotyczące tła, czyli w naszym przypadku:
background-position: 50% 50%; /* położenie tła 50% na 50%*/
background-repeat: no-repeat; /* brak powtórzeń tła */
background-attachment: fixed; /* tło nieruchome */
background-size: cover; /* Rozmiar tła - na cały ekran */
-webkit-background-size: cover; /* Rozmiar tła dla przeglądarki z silnikiem WebKit, np. Chrome i Safari */
-moz-background-size: cover;  /* Rozmiar tła dla przeglądarki Firefox */
-o-background-size: cover;  /* Rozmiar tła dla przeglądarki Opera */
-ms-background-size: cover;  /* Rozmiar tła dla przeglądarki Internet Explorer */

oraz użycie oddzielnych sekcji w kodzie HTML.
Jak zauważyłeś w kodzie powyżej, właściwości background-size mogą nie obsługiwać wszystkie przeglądarki, dlatego warto dodać oddzielne deklaracje dla każdej z grup osobno.
Nasza prosta strona html dostosowuje się również do wyświetlaczy innych urządzeń mobilnych, dzięki czemu zyskuje efekt responsywności. Wszystko dzięki regułom:
@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px;
  }
  section.module p {
    font-size: 20px;
  }
  section.module.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    font-size: 160px;
  }
}

Jak dużo różnych "animacji" można stworzyć przy pomocy efektu paralaksy, doskonale zobrazuje ci demonstracja, którą wykonał John Polacek:
Zobacz Demo

Jeśli myślisz, że efekt Parallax można zastosować wyłącznie do tła, to jesteś w błędzie! Doskonale zilustruje to kolejne demo - slider z przesuwającymi się obiektami:
Zobacz Demo

Jeśli jesteś głębiej w temacie webmasteringu, zajrzyj do anglojęzycznego tutka, który pokazuje, jak uzyskać efekt Parallax z użyciem JQuery oraz porusza temat płynnego przewijania, tzw. "Smooth Scrolling":
Demo Przejdź do poradnika

Myślę, że wystarczy na początek tych wstrząsających nowinek:P Zaglądaj do nas, bo na pewno do efektu Parallax jeszcze wrócimy.
Jak stworzyć szablon dla Bloggera z efektem Parallax Scrolling?

Marzy ci się szablon na Bloggerze właśnie z takim ciekawym efektem? Uzyskanie go jest wbrew pozorom bardzo proste. Wystarczy, że skopiujesz kod html z ramki zamieszczonej na początku artykułu i wykonasz czynności opisane na obrazku poniżej:

Jeśli nie udaje ci się tego zrobić, lub po prostu jesteś leniwy :P możesz pobrać gotowy szablon dla Bloggera:
Zobacz Demo Pobierz szablon

O efekcie Parallax Scrolling raczej niewiele poczytasz na polskich stronach, jednak nie martw się. Odwiedzaj nas, a na pewno dowiesz się jeszcze więcej i pobierzesz stworzone przez nas szablony z tym efektem.

Zobacz również

1 komentarzy