Prosty efekt parallax

24 września 201411 listopada 2016 Mariusz Kuta komentarzy 19 css, html, javascript, parallax, tutorial

podań

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.

<section class="bgnd bgnd-1 js-parallax-bg">
    <!-- zawartość -->
</section>

</section>

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

.bgnd {
    background-attachment: fixed;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    height: 54vh;
    max-height: 1200px;
    min-height: 200px;
}

.bgnd {

background-attachment: fixed;

background-position: 50% 0;

background-repeat: no-repeat;

background-size: cover;

height: 54vh;

max-height: 1200px;

min-height: 200px;

}

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

.bgnd-1 {
    background-image: url(../img/01.jpg);
}

.bgnd-2 {
    background-image: url(../img/02.jpg);
}

.bgnd-3 {
    background-image: url(../img/03.jpg);
}

.bgnd-1 {

}

.bgnd-2 {

}

.bgnd-3 {

}

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

header + .bgnd {
    height: 86vh;
}

header + .bgnd {

height: 86vh;

}

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ę.

var images = [].slice.call(document.querySelectorAll('.js-parallax-bg'));

1	var images = [].slice.call(document.querySelectorAll('.js-parallax-bg'));

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ą.

function getViewportHeight() {
    var a = document.documentElement.clientHeight, b = window.innerHeight;
    return a < b ? b : a;
}

function getViewportHeight() {

var a = document.documentElement.clientHeight, b = window.innerHeight;

return a < b ? b : a;

}

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

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 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;

}

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

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.backgroundPosition = '50% '+Math.round((elOffset - offset)*3/8)+'px';
    }
}

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.backgroundPosition = '50% '+Math.round((elOffset - offset)*3/8)+'px';

}

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

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

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

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

redeemer

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

tego nie znałem:
http://caniuse.com/#feat=viewport-units
- mck
  
  No niestety jest to jedna z tych rzeczy, o których niewiele się mówi, a bardzo pomagają 🙂
  - marsjaninzmarsa
    
    O cholera! Tak bardzo mi tego brakowało… 😀
Comandeer

>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
  
  działa. http://webmastah.pl/tutorial/parallaxbg/index.html
  - 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.
- octamediator
  
  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
- marsjaninzmarsa
  
  To podejście tak bardzo nie ma nic wspólnego z rzeczywistością, że aż skomentuję:
  1. Haksiorski one liner może zmieścić się w 100 znakach, ale ostatnie słowa na jego określenie to będą „proste” i „czytelne”.
  2. Jeśli chcesz czegoś prostego w użyciu, to zawsze zostaje Ci libka sprowadzająca się do:
  jQuery('.selector').paralax();

HTML+CSS

Odrobina magii

Wsparcie przeglądarek

Parallax gotowy

Zobacz też