Parallax Overview - Google Web Designer

Cześć, jestem Nivesh
z zespołu Google Web Designera.

W tym filmie omówię
używanie komponentu Paralaksa

do tworzenia animacji

z efektem paralaksy.

Gdy przewijam stronę
w górę lub w dół,

pierwszy i drugi plan grafiki

przesuwa się z różną szybkością,
tworząc wrażenie głębi.

Komponent Paralaksa
na podstawie danych ze strony wydawcy

przekazuje reklamie zdarzenia przewijania.

W odpowiedzi na te zdarzenia

komponent tworzy animację.

Inne przykłady
efektu paralaksy można znaleźć,

wybierając
Plik > Nowy z szablonu...

i kategorię
„Paralaksa w Display & Video 360”.

Tak wygląda to
w przeglądarce.

Widzimy, że grafika może
przesuwać się zarówno w pionie,

jak i w poziomie
w miarę przewijania strony.

Stwórzmy teraz
własny efekt paralaksy.

Wybieram Plik > Nowy.

W przypadku paralaksy muszę wybrać
środowisko Display & Video 360.

Aby dodać komponent Paralaksa,

otwieram panel Komponenty

i przeciągam komponent

z folderu interakcji na scenę.

Komponent można skonfigurować,

wybierając panel Właściwości

i klikając opcję Obrazy.

Można też
kliknąć dwukrotnie sam komponent.

Zaczyna się od dodania obrazów.

Można je przeciągnąć

z eksploratora plików na scenę

lub na panel warstw.

Można też
kliknąć przycisk plusa w panelu warstw

i dodać obrazy z eksploratora.

Kolejność warstw można zmienić,

przeciągając i upuszczając je w panelu.

Kolejność warstw decyduje o tym,
które z nich będą na wierzchu.

Warstwy wyżej na liście
będą widoczne nad tymi niżej.

Obrazy można ukrywać i wyświetlać,

klikając pole podglądu.

Można też kliknąć ikonę oka,

by ukryć lub wyświetlić
wszystkie obrazy.

Po ukryciu warstwy
można łatwiej pracować nad inną.

Ukryję teraz wszystkie warstwy

z wyjątkiem produktu,
tekstu i tego dużego liścia.

W oknie ustawień
są trzy karty:

Początek, Koniec i Podgląd.

Efekt paralaksy
można skonfigurować,

umieszczając każdą warstwę tam,
gdzie powinna być

na początku i końcu animacji.

Pozycja początkowa to miejsce,
w którym obraz pojawia się na stronie.

To właśnie to miejsce,
w którym komponent się pojawia.

Pozycja końcowa to miejsce,

w którym komponent znika z widoku.

Zacznijmy
od pozycji początkowej.

Ukryję ten liść
i za pomocą myszy przesunę ten element,

by znalazł się na środku.

Mogę też użyć klawiszy strzałek.

Gdy przytrzymam Shift,

mogę przesuwać elementy
o 10 pikseli.

Mogę też wpisać współrzędne
w panelu właściwości warstwy.

Aby szybko skopiować wartości
z pozycji początkowej do końcowej,

można kliknąć
przycisk dopasowania pozycji.

Zmienię teraz
pozycję początkową i końcową liścia.

Gdy przytrzymam Shift,
ograniczę zakres ruchu myszy.

Przesunę teraz ten liść tak,

by na pozycji końcowej
był daleko od reszty.

Gdy włączę opcję „Pokaż ducha”
we właściwościach zaawansowanych,

obraz z karty,
której aktualnie nie edytuję,

stanie się przezroczysty.

Jest to tylko
informacja pomocnicza,

niewidoczna na podglądzie
i w opublikowanym pliku.

Zobaczmy podgląd.

Przewijając w górę i w dół,

widzimy, jak warstwy zachowują się
na przykładowym urządzeniu mobilnym.

Aby kontynuować edytowanie,
mogę kliknąć kartę Początek lub Koniec.

Zmienię wygładzanie
na Wolno-normalnie-wolno,

a rozjaśnianie tekstu z 0,3 na 1.

Zobaczmy podgląd jeszcze raz.

Można też ustawić
szerokość i wysokość warstw.

Zmienię szerokość liścia
na 250 pikseli.

Proporcje są stałe,

więc wysokość
zmieni się automatycznie.

Warstwa zachowuje rozmiar

zarówno w pozycji początkowej,
jak i końcowej.

Oznacza to, że
zmiana rozmiaru nie jest animowana.

Po ukończeniu pracy
nad komponentem

klikam Zapisz,
by powrócić

do normalnego interfejsu
Google Web Designera.

Aby zaoszczędzić czas,
wrócę do pliku z szablonem,

gdzie animacja
jest już skonfigurowana.

Przejdę do panelu Właściwości,

do sekcji Współczynnik przewijania.

To ustawienie wpływa tylko na to,
co znajduje się na scenie.

Można zobaczyć,
jak wyglądałaby reklama

z różnymi współczynnikami przewijania.

Można też sprawdzić
jak reklama wygląda w przeglądarce.

Strona podglądu

emuluje wyświetlenie
reklamy na stronie internetowej

z taką ilością treści, by można było
przewinąć obraz w górę i w dół.

Efekt paralaksy
można zobaczyć

w kontekście całej reklamy,

czyli z przyciskiem wezwania do działania
oraz elementem zamykającym.

Dziękuję za uwagę.