Parallax. Czym jest i jak to zrobić. Studium przypadku.

Parallax to efekt na stronach internetowych który ciągle podoba się użytkownikom internetu. Jeśli chcesz dowiedzieć się jak wykonać go w swoim projekcie to trafiłeś/aś w dobre miejsce.

Dlaczego powstał ten artykuł?

Chciałem Wam pokazać jak wykonać parallax na przykładzie własnego  projektu. Jakiś czas temu kiedy zaczynałem przygodę z kodzeniem obserwując bardziej doświadczonych kolegów i ich reakcję na słowo parallax widziałem specyficzny grymas.

Było to dla mnie dość nie zrozumiałe? Dlaczego się tak krzwić? Bo ten efekt nie jest już “trendy”? Bo nie należy do najbardziej skomplikowanych technicznie? No i co z tego? Ważne, że podoba się użytkownikom więc nie ma co marudzić tylko brać się do pracy 🙂 I tak powstała stronka którą Wam pokażę w dalszej części artykułu. Tymczasem trochę teorii i kodu.

Czym jest parallax?

Klasyczną definicję paralaksy czyli swoistego efektu optycznego związanego z przesunięciem obserwowanych obiektów można znaleść np. na Wikipedii. W praktyce użytkownik internetu patrząc na ten efekt na stronie widzi poszczególne elementy chowające się lub ukazujące zza innych elementów np. grafik lub tekstów.

Żeby było to sobie łatwiej wyobrazić dwa przykłady z życia wzięte. Poniżej paralaksą są grafiki ukazujące się w ramkach. Poruszają się jakby szybciej lub wolniej w stosunku do reszty strony wraz ze skrolowaniem w dół:

Przykład 1Jess & Russ

Kolejny przykład uważam po prostu za piękny. Szkoda, że nie widziałem go na etapie projektowania własnej stronki bo napewno byłby dla mnie inspiracją. Chodzi tu o ten krajobraz na początku który bardzo gustownie chowa się wraz z przewijaniem strony:

Przykład 2 – Firewatch

To jak już jasnym jest czym jest parallax to możemy przejść do kwestii technicznych.

Jak wykonać Parallax?

Dzisiaj opiszę Wam 2 sposoby na wykonanie tego efektu. Pierwszy jest banalnie prosty bo wykorzystamy do tego Bootstrap. W drugim przykładzie wszystko napiszemy już sami 🙂

Parallax w Bootstrapie.

Jeśli nie wiesz jak działa Bootstrap to zapraszam do mojego poprzedniego wpisu gdzie dowiesz się o co w tym chodzi i jak zacząć z nim pracę.

Apropos samej paralaksy to dziwne bo nie widzę już tej funkcjonalności w oficjalnej dokumentacji Bootstrapa, może coś przeoczyłem… Kiedyś był tam ładnie opisany.

Używając tej metody nie potrzebujesz żadnej znajomości JavaScript. Tak, to metoda dla leniwych i nie daje nam tylu możliwości konfiguracji.

See the Pen Rjgqdx by Bart (@bedekodzic) on CodePen.

W przykładzie powyżej kózki nam ładnie przeskakują i możemy umieszczać dowolnie sformatowany tekst/elementy zarówno na obrazku jak i w przerwach między nimi. Rozbijmy to na czynniki pierwsze.

HTML.

Ważne jest aby prawidłowo podlinkować pliki .css i .js z Bootstrapa, robi się to np. w headzie (szczegóły w CodePenie powyżej).

Potem jest to już banalnie proste bo wrzucamy tylko diva z odpowienią nazwą klasy tzn. class=”parallax parallax-1” i każdy dodatkowy “efekt paralaksy” będzie po prostu kolejnym ponumerowanym divem.

Jeśli chcemy umieścić przerwę na tekst między efektami to wrzucamy diva w odpowiednie miejsce <div class=”parallax-text parallax-text-2”>. Ja tutaj dla przykładu wrzuciłem jakiś tekst i ikonki z Bootstrapa. Ot cała filozofia.

<html>
  <body>
     <!-- Paralax -->
     <div class="parallax parallax-1">
         <h1>Nasz tekst na 1 slajdzie.</h1></div>
     <!-- Kolejny efekt -->
     <div class="parallax parallax-2">
         <h1>Nasz tekst na 2 slajdzie.</h1></div>
     <div class="parallax-text parallax-text-2"> 
       <h1>Tutaj coś napiszemy.</h1>
        <a class="box box-1">
            <span class="glyphicon glyphicon-glass" aria-hidden="true"></span></a> <a class="box box-2"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a> <a class="box box-3"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span></a>    </div>
     <!-- Kolejny efekt -->
     <div class="parallax parallax-3">
         <h1>Nasz tekst na 3 slajdzie.</h1></div>
     <div class="parallax-text parallax-text-3"> 
     <h1>Tutaj też coś napiszemy.</h1></div>
  </body>
</html>

CSS.

Teraz wszystko należy odpowiednio wystylować. Nie będę kopiował tu całego kodu tylko istotne elementy, jeśli ktoś jest zainteresowany o sprawdzi sobie Codepena powyżej.

Ważne jest aby ustawić rozmiar poszczególnych elementów efektu. Należy też ustawić background-attachment: fixed; aby to zadziałało.

.parallax {
    background-size: cover;
    height: 700px;
    opacity: 1;
    background-attachment: fixed;
}

Kolejną ważną rzeczą jest odpowiednie ustawienie grafik w tle. W tym wypadku używam właściwości background-image i się to sprawdza.

.parallax.parallax-1 {
    background-image: url(http://www.tapeta-kozy-chmury-biale.na-pulpit.com/zdjecia/kozy-chmury-biale.jpeg);
}

Wszystkie pozostałe CSSy są opcjonalne i czysto estetyczne. Prawda, że metoda jest banalnie prosta?

Parallax w JavaScript.

Teraz wszystko stworzymy sami. Od początku… Będzie to wyglądać nieco inaczej.

Najpierw przykład. Mamy 3 koła które leżąc obok siebie wraz z przewijaniem poruszają się z różną prędkością:

See the Pen yPXZeX by Bart (@bedekodzic) on CodePen.

Rozbijamy to na czynniki pierwsze.

HTML.

Kod jest pokazany poniżej. Tworzymy elementy które mają dawać efekt parallax czyli 3 koła w divach circle. W tym kodzie w zasadzie kluczowe są 3 elementy tzn. klasa parallax która definiuje które obiekty będą objęte efektem, właściwość data-speed która definiuje szybkość efektu i element tekstu h1 który jest nośnikiem dla paralaxy.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Parallax</title>
</head>
<body>
    <div class="circles">
        <div class="circle circle-1 parallax" data-speed="2"></div>
        <div class="circle circle-2 parallax" data-speed="4"></div>
        <div class="circle circle-3 parallax" data-speed="6"></div>
    </div>
    <h1>Użyj scrolla</h1>
</body>
</html>

CSS.

Znowu nie będę powielał zbędnego kodu wyłuszczę tylko ważne kawałki.

Każdy z elementów paralaksy musi mieć właściwość position: absolute;

.circle-1 {
    background-color: black;
    position: absolute;
    left: 30%;
}

Pisałem wcześniej o nośniku dla paralaksy. O co chodzi? Jako, że elementy są na absolucie nie zajmują one więcej przestrzeni niż potrzeba. Żeby miały się po czym przesuwać potrzebne są elementy które im tą przestrzeń stworzą. W tym wypadku tekst h1 gdzie użyjemy paddingu. Trochę z góry i dużo na dole.

h1{
    padding: 5% 5% 50%;
}

JavaScript.

Ostatnia część czyli zdefiniowanie paralaksy. W praktyce nie jest ona niczym innym tylko manipulacją właściwości top w CSS. Dla ułatwienia używam składni jQuery. Jak się to robi?

  1. Tworzymy funkcję i ustalamy zmienne scrolled (mierzy odległość aktualnej pozycji kursora od początku strony), $window (okno w naszej przeglądarce, punkt odniesienia) i el ( odpowiada elementom biorącym udział w paralaksie).
  2. Używamy metody .on(‘scroll’) i mierzymy odległość od samej góry okna (scrolled).
  3. Wybieramy obiekty do paralaksy.
  4. Dla każdego obiektu tworzymy zmienną parallax która jest iloczynem przesunięcia od góry i szybkością danego obiektu.
  5. Wartość parallax przypisujemy do właściwości ‘top’ w CSSie. Dzięki temu obiekty przesuwają się dynamicznie po stronie.

Kod wygląda następująco:

$(function () {
    var scrolled;
    var $window = $(window);
    var el
    $window.on('scroll', function () {
        scrolled = $(window).scrollTop();
        el = $('.parallax');
        el.each(function () {
            var parallax = scrolled * $(this).data('speed');
            $(this).css({
                'top': parallax
            });
        });
    });
});

Ot cała filozofia. Tylko 15 linijek w JSie 🙂

Man. Studium przypadku.

Teraz opowiem o projekcie w którym bawiłem się paralaksą, jest to strona którą nazwałem MAN. Dlaczego tak? Dawno temu chciałem prowadzić bloga o życiu… Jakiś czas temu pomysł się reaktywował i dodatkowo postanowiłem stworzyć stronę wizytówkę do bloga. Tak żeby fajnie wyglądało.

Koncepcja jest taka, że życie to podróż i my jako ludzie w przeciągu danego nam czasu znajdujemy się w rozmaitych miejscach i sytuacjach. Taki tam banał 🙂

Hehe na szczęście prowadzę bloga o programowaniu i narazie tak zostanie. Uważam, że ten format jest lepszy. Czym to uzasadnię? Otóż blogi o życiu się fajnie czyta. W niektórych przypadkach przyjemnie i inspirująco. Ludzie to lubią. Szybko buduje się popularność jeśli ma się o czym pisać. Same plusy?

Niby tak, jednak większość czytelników po takiej lekturze kładzie się spać i zapomina o wszystkim. Kolejny dzień toczy się własnym rytmem a wczorajszy tekst może poza krótką konwersacją ze znajomym nic nie wniósł do ich życia. Tak po prostu jest.

Blogi o kodzeniu są skierowane do stosunkowo wąskiej grupy zainteresowanej tematem. Można znaleść na nich konkretne informacje które przyswojone mogą podnieść kwalifikację zawodowe a w konsekwencji poprawić jakość życia. Realne korzyści. Czyż nie?

Projekt MAN – wyzwania.

Sam pomysł to jeszcze niewiele. Ważne jest jego wdrożenie. Na jakie wyzwania trafiłem podczas swojej pracy?

  1. Stworzenie grafik. Postawiłem na wektory bo jest to mój ulubiony styl. Wszystko musiałem wymyślić od początku. Szukanie inspiracji a potem tworzenie zajęło mi dobrych kilka dni…
  2. Implementacja grafik. Na początku wydawało się to proste. Przekonwertuję na kod i wkleję. Okazało się, że są one na tle skomplikowane, że nie mogłem użyć kodu w większości przypadków. HTML wyglądał koszmarnie. Musiałem balansować między kodem, plikami .svg i .png. Ostatecznie cały kod i grafiki zajął mi mniej niż 1MB. Przy tej ilości grafik uważam to za względny sukces.
  3. Implementacja paralaksy. Koncepcja była taka, że będzie wiele niezależnych ruchomych elementów na kilku różnych widokach. Jak już udało mi się to wszystko spiąć okazało się, że… Chodzi to fatalnie.  Za dużo tam wszystkiego… Nawet mój dość wydajny komputer mulił się strasznie na lokalnym środowisku. To nie mogło tak wyglądać.
  4. Optymalizacja kodu. To jest temat rzeka… Napewno nie jestem do końca zadowolony z aktualnych rozwiązań jednak mimo wszystko da się to stronę jakoś przeglądać. Dużo jeszcze się trzeba nauczyć 🙂
  5. Dobór cytatów. To była czysta przyjemność 🙂

Ostatecznie dociągnąłem ten projekt do końca. Można by go jeszcze długo rzeźbić ale po co? Komercyjnego zastosowania nie będzie więc jeśli będę chciał nad tym kiedyś posiedzieć to temat jest otwarty. W związku z tym, że średnio wyobrażam sobie przeglądanie tej strony na komórce to zoptymalizowałem ją tylko pod szerokości ekranu 1920px i 1280px czyli HD i laptopy.

A oto wyniki mojej pracy:

http://man.bedekodzic.pl/

Jak się podoba? Jest całkiem fajnie ale już teraz mam kilka inspiracji (chociażby ten krajobraz na początku wpisu) które by dodały całości dodatkowego uroku 🙂 No cóż, tak to już jest…

Parallax – podsumowanie.

Choć efekt parallax dni swojej największej popularności ma już chyba za sobą to połączenie tej techniki wraz z dobrym projektem graficznym uważam za formę sztuki. Niektóre projekty są po prostu urzekające i użytkownikom się to najwidoczniej nie nudzi bo ciągle powstają nowe.

Po więcej inspiracji w temacie zapraszam na codepena:

https://codepen.io/tag/parallax/

  • Zawsze podobał mi się ten efekt, dzięki Tobie wiem jak się nazywa :D.

    Na maksa jaram się estetyką MAN. Jak dużego doświadczenia z dziedziny grafiki wymaga stworzenie takiego projektu?

    • Bartłoś Ce

      Fan parallaxy 🙂 Czyli jest nas więcej 🙂

      Wektorami zajmuje się od 2 lat ale techniki które tu użyłem są w zasadzie bardzo podstawowe. Większą sztuką tu była sama synteza kolorów, kształtów i cała koncepcja. Takie rzeczy kręcą mnie już od bardzo dawna ale jakoś wcześniej nie robiłem tego na kompie. Miło mi, że się podoba.