Jak dodawać animacje do sekcji/wierszy

Dawno, dawno temu w Internecie dodawanie animacji do witryny było uciążliwym, nieco specjalistycznym zadaniem. Divi posiada jednak potężne narzędzia do animacji i efekty przewijania, które można zaimplementować bez konieczności posiadania dużej wiedzy technicznej. Każdy może dodać te efekty do swoich witryn przy minimalnym wysiłku. Chociaż procesy tego samouczka można zastosować do dowolnego elementu w Divi, dzisiaj skupimy się na sekcjach i wierszach, aby osiągnąć określone efekty za ich pomocą. Zagłębmy się w animacje!

Zapowiedź

Pulpit

mobilny

Załaduj Divi Builder na stronę lub post

Pierwszą rzeczą, którą musisz zrobić, to wejść do Divi Builder. Niezależnie od tego, czy wybierzesz jeden z naszych pakietów układów (będziemy używać pakietu układów klubu tenisowego w tym artykule), czy własny projekt, wszystkie kroki odbywają się w ustawieniach sekcji i rzędów .

Dzięki temu projektowi będziemy animować 1 sekcję i 3 rzędy, aby uzyskać efekt sekwencyjnego ładowania.

Wybierz gotowy układ

Aby zastosować jeden z naszych profesjonalnie zaprojektowanych pakietów układów, wejdź do Divi Builder i wybierz Użyj gotowego układu . Spowoduje to wyświetlenie listy wszystkich oferowanych przez nas gratisów.

Wybierz układ

Następnie po prostu wybierz pakiet układów, którego chcesz użyć. Możesz sortować według kategorii lub wyszukiwać słowa kluczowe, aby zobaczyć, co dla Ciebie stworzyliśmy.

Znajdź sekcje i wiersze do animacji

Gdy układ zaimportuje wszystkie zasoby i wczyta stronę, będziesz chciał znaleźć sekcję i wiersze, do których chcesz dodać animacje. Pamiętaj, że sekcje są oznaczone kolorem niebieskim w Divi Builder, a rzędy są zielone .

Mając to na uwadze, przejdźmy do dodania tych animacji!

Jak dodać animację do sekcji i wierszy – opcja 1

Dodanie animacji do sekcji Divi jest bardzo proste. Najpierw musisz wejść do ustawień sekcji . Następnie przejdź do karty Projekt i przewiń, aż zobaczysz opcje animacji .

W opcjach animacji dostosujesz do 8 różnych opcji dla wybranej animacji.

1. Style animacji to miejsce, w którym wybierasz sposób wyświetlania animacji. Jeśli sekcja będzie się toczyć koniec nad końcem lub odbijać się od boku kartki jak piłka. Najczęściej spotykane to Fade i Slide .
2. Kierunek – określisz kierunek, w którym porusza się element. Wartość w górę oznacza, że ​​sekcja rozpocznie się na dole i przesunie się w górę. W górę nie jest punktem wyjścia.
3. Czas trwania — jak długo trwa animacja od początku do końca. Niższa wartość przyspieszy, a wyższa spowolni.
4. Opóźnienie — ta opcja zapobiega uruchamianiu animacji tak szybko, jak to możliwe i może pomóc zwrócić na nią uwagę bardziej niż w przypadku natychmiastowego uruchomienia.
5. Intensywność — im niższa wartość, tym płynniejsza niż animacja, podczas gdy wyższe wartości są szybsze i bardziej agresywne.
6. Początkowe nieprzezroczystość — wartość 0 spowoduje, że animacja stanie się niewidoczna i skupi się w trakcie jej trwania. 100 oznacza, że ​​element jest w pełni widoczny jeszcze przed rozpoczęciem animacji.
7. Krzywa prędkości — pozwoli Ci dostosować płynność rozpoczynania i kończenia animacji.
8. Powtórz – czy twoja animacja jest jednorazowym efektem, czy jest to coś, co chcesz zapętlić w kółko? Jeśli animacja jest ustawiona na Once , strona musi zostać ponownie wczytana, aby ponownie ją zainicjować.

Jak dodać animację do sekcji i wierszy – opcja 2

Divi ma również funkcję o nazwie Efekty przewijania . Są to animacje, które uruchamiają się za każdym razem, gdy użytkownik przewinie swój rzutnia do elementu. Efekty przewijania można ustawić na dowolny element i można je łączyć z opcjami animacji , o których wspomnieliśmy powyżej.

Jak włączyć efekty przewijania

Ponownie, każdy element w Divi można ustawić tak, aby miał włączone efekty przewijania, ale dzisiaj mamy do czynienia z sekcjami i wierszami. Wprowadź ustawienia sekcji , przejdź do karty Zaawansowane i znajdź nagłówek Efekty przewijania .

Wybierz efekty i wyzwalacze

W opcjach Efekty przewijania znajdziesz różne zakładki dla różnych rodzajów animacji, które możesz wywołać podczas przewijania.

• Sticky Position — czy sekcja lub wiersz przykleja się do ekranu użytkownika podczas przewijania.
• Efekty transformacji — są to rzeczywiste efekty animacji: ruch poziomy i pionowy, zanikanie/zanikanie, skalowanie rozmiaru, obrót i rozmycie.
• Ustaw [Funkcja] – będziesz mógł ustawić, gdzie efekt jest najbardziej widoczny na ekranie i kiedy/gdzie występuje
• Wyzwalacz efektu ruchu — określisz, czy animacja rozpocznie się, gdy góra elementu wejdzie w rzutnię, środek elementu, czy dół.

Podstawowa różnica między nimi a korzystaniem z opcji animacji w poprzedniej sekcji sprowadza się do tego, czy chcesz, aby animacja była zautomatyzowana, czy też chcesz, aby była wyzwalana za każdym razem, gdy użytkownik wykonuje akcję. Możesz łączyć animacje za pomocą opcji Efekty przewijania i Animacja, których użyjemy do uzyskania efektu głównego samouczka.

Łączenie animacji dla przekrojów i rzędów

Możesz stworzyć oszałamiające efekty dla swoich witryn, łącząc różne animacje, które będą uruchamiane w różnym czasie. Korzystając z opcji Opóźnienie animacji , witryna może animować serię sekcji, wierszy i elementów w sekwencji, aby uzyskać imponujące efekty wizualne.

Na początek ustawimy Styl animacji w ustawieniach sekcji na Slajd z kierunkiem animacji ustawionym na Górę .

Pozostałe opcje pozostaną domyślne. Zwłaszcza opóźnienie animacji . Chcemy, aby sekcja uruchamiała się, gdy jest widoczna.

Ustawienia animacji dla rzędu 1

Następnie dostosujemy pierwszy wiersz w sekcji. Wchodzimy w ustawienia Wiersz , przechodzimy do opcji Animacja na karcie Projekt i ponownie wybieramy Slajd . Tym razem chcemy zmienić Kierunek na W dół i Opóźnienie animacji na 500ms . 1000ms to 1 sekunda, pamiętaj.

Ponieważ pozostawiliśmy czas sekcji na 0 ms, aby uruchomić się natychmiast, chcemy, aby wiersz był nieco przesunięty, aby początkowa animacja w większości zakończyła się przed rozpoczęciem tej.

Ustawienia animacji dla rzędu 2

Następnie przejdziemy do ustawień drugiego wiersza strony i przejdziemy do opcji animacji . Ponownie wybierzemy Slajd jako Styl animacji , a ten wiersz przesunie się w prawo .

Dodatkowo zamierzamy ustawić Opóźnienie animacji na 1000 ms , co oznacza, że ​​zostanie ono uruchomione, gdy tylko zakończy się pierwsza animacja.

Ustawienia animacji dla rzędu 3

W trzecim rzędzie, który animujemy, użyjemy efektów przewijania, aby osiągnąć nasze cele. Ponieważ nasz trzeci rząd zaczyna się tuż nad zakładką, większość animacji byłaby niewidoczna, gdybyśmy po prostu użyli opóźnienia czasowego, tak jak w przypadku innych elementów. Więc zamierzamy sprawić, żeby tak nie było.

Opcje animacji

Po pierwsze, powtórzymy powyższe procesy. Tylko w tym wierszu ustawiamy styl animacji na Fade. Następnie ustawimy czas trwania na 500 ms, aby ten wiersz pojawiał się szybciej podczas animacji. Będziemy opóźnić przez 1500ms, aby zapewnić inne animacje są w pełni zakończona przed rozpoczęciem tego.

Na koniec sprawdź, czy początkowe krycie jest ustawione na 0% . Chcemy, aby ten rząd był niewidoczny, dopóki nie będzie gotowy do zobaczenia.

Ustawienia efektów przewijania

Tutaj zaczyna się zabawa, ponieważ możemy łączyć efekty. Kliknij kartę Zaawansowane dla wiersza i znajdź Efekty przewijania . Znajdź kartę Ruch poziomy i pamiętaj, aby ją włączyć. Następnie ustaw Wyzwalacz efektu ruchu na Środek elementu . Używamy środka, a nie góry, aby upewnić się, że efekt nie zacznie działać, dopóki użytkownik nie przewinie, na wypadek, gdyby okno użytkownika wyświetlało górę wiersza.

Z tym zestawem wiersz będzie czekał, aż wszystko inne zakończy się animacją, aby się pojawił, a następnie, gdy użytkownik przewinie w jego kierunku, cały wiersz będzie się przesuwał z boku ekranu.

Ostateczne rezultaty

Kiedy skończysz to wszystko, twoje wyniki powinny być podobne do tego.

Pulpit

mobilny

Wniosek

Dodanie efektów animacji to niezawodny sposób na uczynienie witryny bardziej dynamiczną, ciekawszą i atrakcyjniejszą wizualnie. Korzystając z wbudowanych narzędzi animacji i efektów przewijania Divi, możesz tworzyć niesamowite kombinacje, które zachwycą każdego odwiedzającego, który przypadkiem wpadnie.

Do czego wykorzystałeś efekty animacji Divi, aby stworzyć swoje sekcje i wiersze? Zobaczmy je w komentarzach!

Artykuł wyróżniony obrazem autorstwa Vectorchok / shutterstock.com