Parallax Scrolling w tle

Z pewnością nie raz widzieliście efektowne tło na elementach strony, które przy przesuwaniu tekstu przemieszczało się, ale co istotne z mniejszą prędkością sprawiając, że całość przyciągała Waszą uwagę. Efekt ten nazywamy Parallax Scrolling’iem.

W zasadzie w tej chwili jest to jeden z wiodących trendów w projektowaniu stron internetowych, a znajdziemy go dziś na większości witryn zarówno dużych medialnych korporacji jak i na niewielkich blogach czy stronach lokalnych małych firm. Jedyna różnica jest taka, że na niektórych realizacjach widać, że cała kompozycja i wdrożenie efektu jest przemyślane przez projektanta, a gdzie indziej, że jest to efekt robiony wyłącznie dla samego efektu – bo tak jest trendy. Bez względu na jakość wdrożenia i motywację najczęściej efekt ten przyciąga uwagę, a w dużej mierze właśnie o to przecież nam chodzi.

Oto najprostszy przykład efektu o jakim piszę.

Efekt Parallax Scrolling dla tła

Efekt polega na nakładaniu na siebie i przesuwaniu względem siebie kilku warstw (obiektów) z czego każda warstwa przesuwa się w innym tempie. Jeśli warstwy położone niżej przesuwają się wolniej względem warstw położonych wyżej, odnosimy wrażenie, że mamy do czynienia z obiektem trójwymiarowym, a w każdym razie dostrzegamy w obiekcie elementy przestrzeni.

Powyżej mamy dwie warstwy: tekst i grafika. Grafika jest warstwą położoną głębiej a więc przemieszcza się podczas przewijania strony wolniej od tekstu który znajduje się tuż nad nią. Jak taki efekt osiągnąć na stronach budowanych w wordpress’ie? Okazuje się, że nie musimy specjalnie się wysilać bo gro motywów graficznych ma wbudowane mechanizmy pozwalająca na generowanie podobnych efektów wizualnych.

Weźmy wybrany motyw dostępny na WeWeb.

1. Uruchamiamy edycję wybranej strony na której chcemy wstawić efekt i redagujemy jej układ korzystając z wizualnego buildera layoutu

builder

 

2. Wprowadzamy treść i zapisujemy zmiany

treść

 

3. Przechodzimy do opcji wiersza, w którym umieściliśmy tekst.

opcje

 

4. W sekcji tła (Background) przesyłamy na serwer obraz który za chwilę stanie się tłem i elementem kluczowym dla naszego efektu. Pod zdjęciem Background Mode ustawiamy na „Parallax Scrolling” – możemy jeszcze ustawić kolor tła zbliżony do kolorystyki całego obrazka, ale nie musimy.

tło

 

5. W naszym przykładzie wybraliśmy ciemne tło co oznacza, że czarny tekst nie będzie na nim dobrze widoczny. W tej sytuacji poniżej zmieniamy konfigurację dla czcionek i zmienimy ich kolor z domyślnego na biały.

0005

 

6. Możemy także dobrać odpowiednie dostępny tekstu od krawędzi tła przy pomocy parametru padding.

padding

 

Bardzo prosty do osiągnięcia efekt. W przypadku niektórych innych motywów graficznych jak chociażby opisywany wcześniej The7 osiągniecie celu jest równie proste, ale mamy nieco więcej opcji konfiguracyjnych jak np. możliwość określenia tempa w jakim tło się przemieszcza. Dzięki temu możemy lepiej zapanować nad efektem.