Efekt animacji można dodać do dowolnego elementu Zero Block . Istnieją dwa rodzaje efektów animacji: podstawowy i zaawansowany lub animacja krok po kroku. W tym artykule omówimy najbardziej podstawowe ustawienia animacji.
Podstawowe opcje animacji obejmują:
- Animacja - różne opcje rozpoczęcia efektu animacji;
- Paralaksa - ustawienia efektu paralaksy;
- Naprawianie - stałe ustawienia efektu pozycjonowania.
Animacja
Efekty animacji obejmują Zanikanie, Zanikanie w prawo, Zanikanie w lewo, Zanikanie w górę, Zanikanie w dół i Powiększenie.
Wszystkie efekty animacji mają kilka wspólnych ustawień, takich jak Czas trwania, Opóźnienie i Przesunięcie wyzwalania.
Czas trwania to czas trwania efektu animacji w sekundach. Wartość liczbowa to liczba sekund, przez które będzie trwał efekt animacji.
Opóźnienie to opóźnienie w sekundach przed rozpoczęciem efektu animacji.
Przesunięcie wyzwalania to przesunięcie w pikselach od dolnej krawędzi kontenera okna, w którym animacja zaczyna się odtwarzać.
W przypadku korzystania z efektów animacji z elementami pojawiającymi się od góry, od dołu, z prawej lub z lewej strony, opcja "Odległość" oznacza odległość pokonywaną przez blok od miejsca, w którym pojawia się on po raz pierwszy.
Efekt Powiększenie ma ustawienie Skala. Jeśli jest ono ustawione na mniej niż 100%, element zostanie powiększony do oryginalnego rozmiaru. Jeśli jest ustawiona na więcej niż 100%, element zostanie pomniejszony i będzie wyglądał na mniejszy.
Czas trwania to czas trwania efektu animacji w sekundach. Wartość liczbowa to liczba sekund, przez które będzie trwał efekt animacji.
Opóźnienie to opóźnienie w sekundach przed rozpoczęciem efektu animacji.
Przesunięcie wyzwalania to przesunięcie w pikselach od dolnej krawędzi kontenera okna, w którym animacja zaczyna się odtwarzać.
W przypadku korzystania z efektów animacji z elementami pojawiającymi się od góry, od dołu, z prawej lub z lewej strony, opcja "Odległość" oznacza odległość pokonywaną przez blok od miejsca, w którym pojawia się on po raz pierwszy.
Efekt Powiększenie ma ustawienie Skala. Jeśli jest ono ustawione na mniej niż 100%, element zostanie powiększony do oryginalnego rozmiaru. Jeśli jest ustawiona na więcej niż 100%, element zostanie pomniejszony i będzie wyglądał na mniejszy.
Paralaksa
Animacje paralaksy mają dwa ustawienia - przewijanie i ruch myszy.
Paralaksa na przewijaniu
Paralaksa przy ruchu myszą
W ustawieniach Paralaksy przy przewijaniu znajdź ustawienie Szybkość. Jeśli prędkość jest mniejsza niż 100%, element będzie poruszał się wolniej niż przewijana strona. Jeśli prędkość jest większa niż 100%, element będzie poruszał się szybciej niż przewijana strona.
W ustawieniach Paralaksy przy ruchu myszą odległość wzdłuż osi X i Y oznacza maksymalny efekt pochylenia paralaksy.
W ustawieniach Paralaksy przy ruchu myszą odległość wzdłuż osi X i Y oznacza maksymalny efekt pochylenia paralaksy.
Naprawianie
Podczas konfigurowania animacji mocowania można wybrać miejsce, w którym element zostanie zamocowany. Jest to obszar ekranu (góra, środek lub dół ekranu), w którym rozpoczyna się efekt mocowania. Można wybrać jeden z trzech obszarów - górę okna, środek okna lub dół okna.
Przesunięcie wyzwalacza to punkt, w którym element zostanie zamocowany względem góry okna, środka okna lub dołu okna.
Odległość to odległość w pikselach, którą element powinien pokonać podczas animacji mocowania.
Przesunięcie wyzwalacza to punkt, w którym element zostanie zamocowany względem góry okna, środka okna lub dołu okna.
Odległość to odległość w pikselach, którą element powinien pokonać podczas animacji mocowania.
Zalecamy przeczytanie artykułu "Elementy samoprzylepne w Zero Block ", aby dowiedzieć się, jak stworzyć efekt mocowania i jak wygląda on na stronie.
