Prosty efekt parallax

Niewątpliwie jednym z najpopularniejszych upiększaczy naszych stron w ostatnim czasie jest efekt parallax. W skrócie polega na tym, że fragment strony przesuwa się z inną prędkością niż pozostałe, co daje pewne złudzenie trójwymiarowości. Wbrew pozorom stworzenie takiego efektu dość łatwe, co postaram się udowodnić poniżej.

Demo

HTML+CSS

Zacznijmy od prostego HTML-a.

Od strony CSS potrzebujemy przede wszystkim odpowiedniego ustawienia tła oraz wysokości animowanej sekcji.

Oczywiście każda sekcja otrzymuje inne tło:

Pierwszą, tytułową sekcję wyróżnimy zwiększając nieco jej wysokość.

Odrobina magii

Zacznijmy od zebrania wszystkich sekcji, które chcemy animować. Wykorzystamy do tego natywną metodę querySelectorAll. Ponieważ metoda ta zwraca wynik w postaci obiektu NodeList, który nie pozwala na iterację w pętli, musimy posłużyć się drobną sztuczką, by otrzymany wynik przekształcić w tablicę.

Niezbędna będzie informacja o wysokości okna przeglądarki, a ponieważ różne przeglądarki podają nieco rozbieżne wyniki, musimy posłużyć się kolejną sztuczką.

Potrzebna będzie również informacja o aktualnym położeniu strony w pionie:

Następnie dla każdej sekcji, która jest widoczna na ekranie, wykonamy drobne obliczenia i ustawimy odpowiednią pozycję tła.

Całość wesprzemy biblioteką Gator, pozwalającą na delegację zdarzeń (dla prostych skryptów jest to dobra alternatywa jQuery), w tym przypadku scroll-a:

Wsparcie przeglądarek

Oczywiście tradycyjnie problemy dotyczą Internet Explorera w wersji 8 i starszych. Drobne błędy występują także w Operze opartej o silnik Presto i starszych wersjach przeglądarek mobilnych.

Parallax gotowy

Demo

Programista (PHP/MySQL, Node.js/MongoDB), koder (HTML/CSS/JS), ale od biedy nawet layout machnie ;)

  • redeemer

    Dokładnie to efekt nazywa się „parallax scrolling”. https://en.wikipedia.org/wiki/Parallax_scrolling

    • mck

      No niestety jest to jedna z tych rzeczy, o których niewiele się mówi, a bardzo pomagają 🙂

  • >Ponieważ metoda ta zwraca wynik w postaci obiektu NodeList, który nie pozwala na iterację w pętli
    Pewne uproszczenie – wszak w for działa 😉 Bardzo mnie ciekawi jaka była przesłanka za tym, żeby de facto wszystkie tego typu obiekty w DOM potraktować jako array-like a nie normalne tablice. Na szczęście w DOM 4 dostajemy już normalną tablicę, normalne querySelectorAll (jako metodę query, bez skopanego scope) a w ES6 dodatkowo metodę Array.from i takich problemów po prostu nie będzie.

    >Całość wesprzemy biblioteką Gator, pozwalającą na delegację zdarzeń
    Szkoda, że używasz jej do zwykłego zbindowania zdarzenia a nie faktycznie delegacji. W tym wypadku po prostu bym użył addEventListener. Zresztą przy scrollu raczej bardziej by się przydał debounce/throttling niźli delegacja.

    BTW można to machnąć w pure CSS: http://blog.keithclark.co.uk/pure-css-parallax-websites/ 😉

    • mck

      Zgadzam się, ten wpis jest pełen uproszczeń, ale trochę głupio prawdziwym webmastahom tłumaczyć absolutne podstawy 😉
      A CSS-ową wersję oczywiście znam, to m.in. ona była inspiracją do tego wpisu.

    • Programista

      Odnośnie wersji CSS, to na wolnym kompie strasznie laguje, w wersji JS ten problem nie występuje.

      ps.
      całkiem fajnie opisane, mam nadzieje, że to tylko początek i czekam na jakieś bardziej zaawansowane poradniki

  • dsv dfsvfd

    Jest ktoś w stanie treściwie opisać krok po kroku co się dzieje w ostatnich 3 oknach?Opisać wszystkie funkcje ,sekcje linijka po linijce?Jest mi to bardzo potrzbne do mojej pracy licencjackiej :)Pozdrawiam 🙂

    • dsv dfsvfd

      widzę że nie mogę spodziewać się odpowiedzi..

      • Marek

        I bardzo dobrze.. po co komu taki licencjat jak nie potrafi napisać i opisać kilku prostych linii kodu..

        • dsv dfsvfd

          Nie pytałem o zdanie tylko prosiłem o pomoc.Uczę się.

  • dsv dfsvfd

    Kod niestety mi nie działa:(Wszystko dodałem ale efektem końcowym jest tylko nie poruszające się zdjęcie.Brak Poruszającego się zdjęcia w z inną prędkością:(Proszę sprawdzić skrypt czy działa:)jaka może być przyczyna?Dodam że pliki parallax.js i gator.js dodałem..

    • nrm
      • dsv dfsvfd

        Tak.Faktycznie działa:)Nie dodałem pliku Gator:)Ale wciąż nie wiem co się dzieje w bieżącym kodzie.Czy Mogę liczyć na pomoc z jego opisaniem?Jestem początkującym webmasterem a chciałbym pogłębiać swoją wiedzę:))Bardzo Proszę 🙂

        mam problem mianowicie z tą częścią kodu:)

        function getViewportScroll() {
        if(typeof window.scrollY != ‚undefined’) {
        return window.scrollY;
        }
        if(typeof pageYOffset != ‚undefined’) {
        return pageYOffset;
        }
        var doc = document.documentElement;
        doc = doc.clientHeight ? doc : document.body;
        return doc.scrollTop;
        }

        function doParallax() {
        var el, elOffset, elHeight,
        offset = getViewportScroll(),
        vHeight = getViewportHeight();

        for(var i in images) {
        el = images[i];
        elOffset = el.offsetTop;
        elHeight = el.offsetHeight;

        if((elOffset > offset + vHeight) || (elOffset + elHeight < offset)) { continue; }
        el.style.backgroundPositi+Math.round((elOffset – offset)*3/8)+'px';
        }
        }

        Gator(window).on('scroll', doParallax);

  • Gość

    Jeśli to ma byc kurs to ja dziękuję takiemu nauczycielowi. Zero od a-z Jakieś wycinki kodów sekcji co zrobić. Jako początkujący nie widze tu kroków typu od html Doctype etc do koncowego efekty tylko jakis srodek. Porazka

    • nrm

      Jeżeli komuś nie wystarczą takie absolutne podstawy ani nic nie widzi w całym gotowym html to już niestety pretensje tylko do siebie.

    • To nie jest aż takie trudne, wszystko działa 🙂 Nigdy nic nie będziesz miał „na tacy” 😛

  • Konrad

    tyle linijek kodu i to ma być proste? najpierw zmieść się w 100 znakach a potem pisz że coś jest proste

Send this to friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL