Wyprzedaż urodzinowa Elementora

Enjoy 60% Off on new purchases, renewal and upgrades.

00 Dni
:
00 godziny
:
00 Minuty
:
00 sekundy

Kup Teraz

Jak animować sekcje i wiersze w Divi

Rifat Divi Tutorials Oct 12, 2021

Każdy jest wielkim fanem kreatywnego projektowania i animacji. Dobrze zaprojektowane animacje to najbardziej wciągająca sekcja każdej strony internetowej, która przyciąga uwagę odwiedzających. Jeśli projekt zostanie odpowiednio zastosowany, odpowiednia animacja jest w stanie stworzyć silną więź między użytkownikiem a treścią na stronie. Divi ma wbudowane profesjonalne narzędzia do przetwarzania potężnych animacji i efektów. Nie potrzebujesz żadnej specjalistycznej wiedzy, aby zastosować te efekty. Dzisiaj zobaczymy, jak dodać piękną animację do dowolnych sekcji i wierszy przypominających cząstki strony w Divi za pomocą wbudowanych funkcji.

Podgląd projektu

Z tego postu dowiesz się, jak łatwo projektować animacje w Divi. Wcześniej zobaczmy, jak nasz projekt będzie wyglądał dzisiaj.

Przygotowanie strony

Projektowanie animacji na stronie w Divi jest bardzo proste i możesz zastosować efekty animacji do dowolnego elementu strony, jeśli chcesz. Postaramy się wykonać animację na gotowym szablonie, ale możesz w ten sposób nadać animacyjny wygląd stronom w Twojej witrynie.

Utwórz nową stronę i zacznij od „Przeglądaj układy”.

Niesamowite oferty

Elementor 6 urodziny z do 60% zniżki

Zacząć teraz

Teraz wybierzmy gotowy szablon dla naszego dzisiejszego projektu. W dzisiejszym samouczku użyjemy pakietu układu klubu tenisowego, ale możesz użyć wszystkiego! Kliknij „Użyj tego układu”, a będzie gotowy do edycji.

Po wdrożeniu projektu, możemy po prostu rozpocząć nasz dzisiejszy samouczek.

Wprowadzenie do opcji animacji

Wybór obszaru

System projektowania jest dość prosty. Tutaj wybraliśmy sekcję nagłówka dla naszego dzisiejszego projektu. Aby ten projekt mógł się udać, musimy znaleźć każdy element/wiersz/kolumnę na obszarze. Z opcji warstwy projektowej w prawym dolnym rogu możesz zobaczyć każdy element z osobna.

Ustawienie 1 - Dodaj animację do sekcji i wierszy

Divi ma wbudowane opcje animacji do projektowania. Wybierz dowolny element strony i przejdź do zakładki projekt. Przewijaj dalej, a zobaczysz opcję animacji.

Moduł animacji

Istnieje 8 różnych opcji, aby nadać elementowi efekt animacji. Porozmawiajmy o nich krótko.

  • Styl animacji — tutaj możesz wybrać animację wyglądu przedmiotu. Możesz wybrać jeden styl dla swojego przedmiotu, a najpopularniejsze style to — Zanikanie i Przesuwanie .
  • Kierunek — z tej opcji możesz określić kierunek animacji.
  • Czas trwania — ta opcja pozwala określić, jak długo będzie trwać animacja. Liczy się to w milisekundach, a Twoja animacja będzie trwać tak długo, jak chcesz.
  • Opóźnienie — ta opcja jest bardzo przydatna, jeśli chcesz rozpocząć animację od określonego czasu, ponieważ zapobiega jej uruchamianiu podczas ładowania strony.
  • Intensywność — Intensywność określa sposób, w jaki ta animacja ma wyglądać. Jeśli wartość jest niższa, animacja będzie płynna. Im wyższa wartość, tym agresywniejsza animacja.
  • Initial Opacity - 0 oznacza, że animacja jest niewidoczna i zaraz się rozpocznie, a 100 oznacza, że jest w pełni widoczna i animacja jest kompletna.
  • Krzywa prędkości — wskaże płynny początek i koniec animacji.
  • Powtórz — za pomocą tej opcji możesz ponownie wykonać animację.

Ustawienia 2 - Dodaj animację do sekcji i wierszy

Kolejną rzeczą są efekty przewijania, które uruchamiają animację podczas przewijania. W ten sposób animacja zaczyna się, gdy element znajduje się na ekranie i dzieje się podczas przewijania.

Włącz efekty przewijania

Możesz ustawić efekty przewijania w różnych stylach, aby stworzyć animację przewijania.

  • Sticky Position — sekcja lub wiersz mogą przestać odpowiadać, gdy użytkownik je przewinie.
  • Efekty transformacji — powyższe efekty są prawdziwymi technikami animacji.
  • Ustaw [Funkcja] Â – będziesz mógł określić, gdzie efekt jest najbardziej widoczny na ekranie i kiedy/gdzie występuje
  • Wyzwalacz efektu ruchu — ważne jest, aby dowiedzieć się, kiedy rozpoczyna się animacja; można to zrobić, sprawdzając, gdzie górna część elementu najpierw wchodzi w rzutnię, gdzie znajduje się środek elementu lub gdzie znajduje się dół elementu.

Istnieją poważne różnice między tymi dwiema metodami, mimo że obie metody obsługują ustawienia animacji. Główną różnicą jest to, czy chcesz, aby animacja uruchamiała się automatycznie, czy przy każdej akcji wykonywanej przez użytkownika. Możesz użyć ustawień Efekty przewijania i Animacja, aby mieszać animacje. Jak zobaczysz, zostaną one zastosowane w głównym samouczku.

Projekt animacji strony

Kombinacja animacji dla sekcji i rzędów

Tworzenie oszałamiających efektów w Divi przy użyciu tych opcji jest bardzo łatwe. Dzięki opcji opóźnienia animacji możesz stworzyć serię animacji na różnych elementach i uzyskać fantastyczne efekty wizualne.

Dla całej sekcji nagłówka postępuj zgodnie z tymi ustawieniami.

  • Styl animacji: slajd
  • Kierunek animacji: w górę

Ustawienie animacji rzędu 1

Zaczniemy od animacji Wiersz 1. Dokonaj następujących korekt.

  • Styl animacji: slajd
  • Kierunek animacji: w dół
  • Opóźnienie animacji: 500 ms

Aby zapobiec uruchomieniu wiersza przed animacją, musimy nieznacznie przesunąć pozycję wiersza.

Ustawienie animacji rzędu 2

W wierszu 2 zastosuj ustawienia wymienione poniżej.

  • Styl animacji: slajd
  • Kierunek animacji: w prawo
  • Opóźnienie animacji: 1000 ms

Ustawienie animacji rzędu 3

Użyjemy efektów przewijania w wierszu 3, ponieważ gdy pojawi się trzeci wiersz, większość elementów z pierwszych dwóch wierszy przesunie się w górę, a korzystanie z modułu opóźnienia czasowego nie jest tego warte, ponieważ możemy używać tylko efektów przewijania, aby projekt przyjemniejszy.

Ustawienia animacji

Dokonaj poprawek animacji.

  • Styl animacji: zanikanie
  • Czas trwania animacji: 500 ms
  • Opóźnienie animacji: 1500 ms
  • Początkowe krycie animacji: 0%

Nieprzezroczystość początkowa 0 oznacza, że nie będzie widoczna, dopóki nie powinna być.

Ustawienia efektów przewijania

Kliknij kartę Zaawansowane, aby rozpocząć zabawę! Przejdź do zakładki efektów przewijania i znajdź ruch w poziomie. I podążaj za resztą.

  • Lepka pozycja: nie przyklejać
  • Efekty przekształcenia przewijania: poziome (2.)
  • Włącz ruch poziomy: Tak
  • Wyzwalacz efektu ruchu: środek elementu.

Wszystko jest ustawione. Zakończyliśmy proces animacji. Gdy użytkownik przewinie, nastąpi animacja.

Ostateczny podgląd

Oto efekt końcowy naszego projektu.

Wniosek

Dzięki obecnemu efektowi animacji, strona internetowa może zbliżyć się do odwiedzającego, zwiększając dynamikę, wizualizację i czytelność. Tworzenie fajnych animacji nie wymaga znajomości kodowania, wystarczy kreator Divi. I najlepiej byłoby, gdybyś miał trochę cierpliwości, aby wypróbować nowe style. Mam nadzieję, że napiszesz, a jeśli tak, udostępnienie będzie Cudowne!