Dzisiaj poinformowano nas o nowej aktualizacji Divi który oferuje tak zwane efekty animacji przewijania. Przyjrzeliśmy się temu i w tym samouczku podsumujemy, czego należy się spodziewać.
Zacznijmy.
Jakie są efekty przewijania?
Efekty przewijania to konfigurowalne animacje, które reagują na Twoje odwiedzający podczas przewijania strony w górę i w dół. W przeciwieństwie do tradycyjnych animacji, efekty przewijania są bezpośrednio powiązane z zachowaniem przewijania gość. Szybkość i kierunek animacji zależy od szybkości i kierunku przewijania gość. Oś czasu animacji opiera się na położeniu elementu w oknie przeglądarki.
Brzmi skomplikowanie, ale z Divi, to całkiem proste
Każdy element można animować za pomocą kombinacji skali, obrotu, ruchu w poziomie i pionie, efektu krycia i rozmycia. Kontrolujesz zatem wielkość każdego efektu w różnych punktach animacji Divi zajmuje się resztą, tworząc piękne przejścia, gdy te elementy wchodzą i poruszają się w twoim widoku. gość. Twórz proste animacje, które dodają subtelnej głębi i wyrafinowania, lub łącz efekty i animuj wiele elementów, aby stworzyć spektakularne wybuchy aktywności, które zachwycą Twoje odwiedzający!
6 nowych sześciu unikalnych efektów
Efekty dostępne do wyboru lub w kombinacjach. Divi zawiera sześć różnych efektów przewijania, z których każdy można indywidualnie dostosować za pomocą naszego nowego interfejsu użytkownika efektów przewijania. Możesz także łączyć dowolne efekty, aby tworzyć bardziej złożone animacje.
Ruch pionowy
Efekt ruchu pionowego umożliwia dowolnemu elementowi poruszanie się w górę iw dół strony w zależności od szybkości i kierunku przewijania przez użytkownika. Rezultatem jest efekt paralaksy! Teraz wszystko można wykorzystać do tworzenia efektów paralaksy za pomocą Divi. Możesz nawet połączyć ruch w pionie z obrazami tła paralaksy, aby stworzyć naprawdę imponujące projekty.
Ruch poziomy
Efekt ruchu poziomego jest podobny do efektu ruchu pionowego, z tą różnicą, że umożliwia przesuwanie elementów od lewej do prawej na ekranie w zależności od kierunku i szybkości przewijania odwiedzającego. . Możesz nawet łączyć ruch w pionie i poziomie, co daje pełną kontrolę nad ruchem dowolnego elementu!
Rozmycie kontekstowe
Efekt rozmycia spowoduje wyostrzenie i wyostrzenie elementów w zależności od szybkości i kierunku przewijania przez użytkownika. Ponieważ Divi pozwala kontrolować początkowe, środkowe i końcowe wartości rozmycia, możesz wyostrzyć elementy, gdy znajdują się przed oczami gościa. To świetny sposób na zwrócenie uwagi na ważne informacje.
stopiony
Efekt zanikania z elementami pojawiającymi się i zanikającymi w zależności od szybkości i kierunku zwoju odwiedzającego. Możesz mieszać elementy, sprawiać, że znikają lub jedno i drugie. Połączenie zanikania, rozmycia i skalowania może stworzyć naprawdę wyrafinowane animacje, które dodadzą dodatkowego efektu do twoich projektów.
Efekt skalowania
Efekt skali zwiększy lub zmniejszy rozmiar dowolnego elementu w zależności od szybkości i kierunku przewijania przez gościa. Jeśli chcesz zwrócić uwagę na konkretny element, na przykład wezwanie do działania, możesz ustawić efekt skalowania, aby zwiększyć rozmiar elementu, gdy zbliża się on do środka ramki. okno. Oczywiście istnieje również wiele innych możliwości!
Efekt rotacji
Efekt obracania z obraca element w dowolnym kierunku w zależności od szybkości i kierunku przewijania odwiedzającego. Subtelny obrót może naprawdę ożywić sceny. Wystarczy trochę kręcić w połączeniu z ruchem poziomym, co może wyglądać świetnie! Lub pozwól elementom krążyć w kółko.
Nowy intuicyjny interfejs
Prawdziwym pięknem efektów przewijania Divi jest ich łatwość użycia! Dostępny jest nowy interfejs użytkownika, który upraszcza proces tworzenia animacji internetowych, dzięki czemu są one dostępne dla każdego. Za pomocą jednego kliknięcia możesz dodać lub połączyć jeden z sześciu efektów przewijania Divi. Od razu po wyjęciu z pudełka będą świetnie wyglądać! Następnie możesz dostroić efekty, aby tworzyć jeszcze bardziej zaawansowane animacje.
Jedno kliknięcie i to wszystko!
Chcesz dodać efekt przewijania do modułu? Jedno kliknięcie doda efektu i będzie wyglądać świetnie! Aby dodać efekt przewijania, po prostu uzyskaj dostęp do nowej grupy opcji Efekty przewijania na karcie Zaawansowane dowolnego modułu, wiersza, kolumny lub sekcji. W tym samym czasie można aktywować wiele efektów, które zostaną połączone w jedną płynną animację, która pięknie się zmienia podczas przewijania.
Chcesz mieć pełną kontrolę? masz to !
Po aktywacji efektu przewijania masz pełną kontrolę nad wielkością efektu w każdym punkcie animacji. Kontrolując wartości początkowe, środkowe i końcowe, kontrolujesz co robi animacja. Po ustawieniu wartości Divi zajmie się resztą i przeniesie element, gdy porusza się w oknie przeglądarki, tworząc animację.
- Wartość początkowa - Stan animacji początkowej używanej, gdy element wchodzi na dół okna przeglądarki.
- Wartość pośrednia - pośredni stan animacji, który zostanie przeniesiony, gdy element przesunie się na środek okna.
- Wartość końcowa - Końcowy stan animacji, który pojawia się, gdy element opuszcza okno przeglądarki u góry ekranu.
Na przykład efekt krycia z wartością początkową 0 (niewidoczny), medianą 100 (w pełni widoczny) i końcową wartością 0 (niewidoczny) zmieni się ze stanu niewidocznego po wejściu okno, aż stanie się w 100% widoczne na środku okna, po wyjściu z okna zniknie w stanie niewidocznym.
Dostosowywanie osi czasu animacji
Możesz nie tylko dostosować wartości animacji, ale także dostosować oś czasu animacji. Interfejs użytkownika osi czasu reprezentuje wysokość okna przeglądarki. Każda klatka kluczowa animacji może zostać wyzwolona w innym miejscu w rzutni. Pozwala to kontrolować początek, koniec i czas animacji animacji na podstawie położenia animowanego elementu na osi y okna przeglądarki.
- Początkowa pozycja klatki kluczowej - Ta opcja kontroluje początek animacji. Jeśli chcesz opóźnić animację, przeciągnij pozycję początkowej klatki kluczowej do wewnątrz.
- Środkowa pozycja klatki kluczowej - To kontroluje punkt, w którym animacja osiąga centralną wartość animacji. Nie musi znajdować się dokładnie w środku osi czasu animacji. Możesz przenieść środkową klatkę kluczową w dowolne miejsce w oknie.
- Pozycja końca klatki kluczowej - Ta kontrolka służy do zakończenia animacji. Jeśli chcesz, aby animacja zakończyła się, zanim klip opuści okno przeglądarki, możesz przeciągnąć pozycję końcowej klatki kluczowej do wewnątrz.
Dodaj statyczne stany do dowolnej animacji
Możesz także dodać przerwy do animacji, zwiększając czas trwania statycznej wartości efektu środka. Aby utworzyć statyczny czas trwania animacji, kliknij dwie strzałki po najechaniu na środkową klatkę kluczową. Następnie możesz wydłużyć środkową klatkę kluczową, przeciągając jej krawędzie do przodu i do tyłu. W tym momencie animacji element pozostanie statyczny. Po zakończeniu statycznego czasu trwania animacja będzie nadal przechodzić do ostatecznej wartości.
Co myślisz o tych nowych funkcjach? Nie wahaj się i podziel się swoimi opiniami w komentarzach.
