parallax.jpg

 

Jednym z ciekawych efektów na stronach jest tzw. Parallax.

Polega on na tym, że zdjęcie w tle jest przyczepione do ekranu i nie przesuwa się równo wraz ze scrollowaniem strony w dół.

 

Różne definicje Parallax

W3Schools nazywa efektem Parallax przyczepienie tła na sztywno. Zobacz ich przykład.

Jednak ja uważam, że prawdziwy Parallax powoduje przesuwanie tła, ale wolniejsze, dając efekt drugiego planu. Przykład. Jak wdrożyć to na stronie? Służy nam do tego bardzo prosta biblioteka JS o nazwie parallax

 

Jak użyć parallax.js np. w Joomla?

1) Pobierasz bibliotekę JS, np. stąd http://pixelcog.github.io/parallax.js/

2) Wstawiasz odp. kod do swojego pliku index.php szablonu, w sekcji <head>

<script src="<?php echo $this->baseurl . '/templates/' . $this->template . '/js/parallax.min.js' ?>"></script>

3) Sekcja, która ma mieć zdjęcie w tle, powinna być oznaczona np. tak

<section id="###" class="parallax-window" data-parallax="scroll" data-image-src="/images/yyy.jpg">

4) Możesz użyć dodatkowych parametrów, np. 

  • data-position-y=”top” (określa, że jeśli zdjęcie jest za wysokie, pokażemy jego górę)

 

Chcesz zobaczyć przykłady na stronach mojego autorstwa? Zapraszam na