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.
[button url=’/tutorial/parallaxbg/index.html’ size=’large’ style=’blue’]Demo[/button]
HTML+CSS
Zacznijmy od prostego HTML-a.
|
1 2 3 |
<section class="bgnd bgnd-1 js-parallax-bg"> <!-- zawartość --> </section> |
Od strony CSS potrzebujemy przede wszystkim odpowiedniego ustawienia tła oraz wysokości animowanej sekcji.
|
1 2 3 4 5 6 7 8 9 |
.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:
|
1 2 3 4 5 6 7 8 9 10 11 |
.bgnd-1 { background-image: url(../img/01.jpg); } .bgnd-2 { background-image: url(../img/02.jpg); } .bgnd-3 { background-image: url(../img/03.jpg); } |
Pierwszą, tytułową sekcję wyróżnimy zwiększając nieco jej wysokość.
|
1 2 3 |
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ę.
|
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ą.
|
1 2 3 4 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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:
|
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
[button url=’/tutorial/parallaxbg/index.html’ size=’large’ style=’blue’]Demo[/button]
