Jak animować litery w unikalnych projektach tekstowych w Divi

Animacja stała się powszechną częścią user experience nowoczesnych stron internetowych. Oprócz tego, że wygląda fajnie, może również dodać subtelny interaktywny element, który angażuje użytkownika, ożywiając treść. Wbudowane efekty animacji Divi umożliwiają animację niemal dowolnego elementu na stronie za pomocą różnych stylów animacji.

W tym samouczku pokażę, jak animować litery dla niektórych unikalnych projektów tekstów w Divi. Umieszczając pojedyncze litery w module tekstowym, możesz kierować animację każdej litery za pomocą różnych stylów animacji, czasu trwania i opóźnień, które sprawią, że treść będzie się wyróżniać w kreatywny sposób. Ta technika służy wyłącznie do celów projektowych, ponieważ litery tworzące treść nie będą zbyt przyjazne dla SEO. Jednak animowane litery pozwalają w oszałamiający sposób podzielić się swoją historią z użytkownikami.

Zacznijmy.

zapowiedź

Pobierz układ przykładów projektowania animacji listów ZA DARMO

Aby położyć swoje ręce na projektach animacji liter z tego samouczka, najpierw musisz je pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.

Przejdźmy do samouczka, dobrze?

Pierwsze kroki

Do tego samouczka wystarczy Divi. Będziemy budować projekty od podstaw, korzystając z konstruktora Divi na froncie. Aby rozpocząć, utwórz nową stronę, nadaj jej tytuł i wdróż kliknij, aby użyć Divi Builder. Następnie wybierz opcję „buduj od podstaw” i kliknij, aby zbudować na interfejsie.

Teraz jesteś gotowy do projektowania!

Budowanie układu do animowania liter

Dodawanie sekcji, wiersza i kolumny

Śmiało i utwórz nową zwykłą sekcję z wierszem z jedną kolumną.

Zanim zaczniemy dodawać nasze moduły tekstowe (które będą zawierać białe litery), dodajmy ciemne tło do sekcji. Otwórz ustawienia sekcji i dodaj obraz tła. Używam abstrakcyjnego obrazu tła z gotowego układu strony docelowej firmy inwestycyjnej.

Tworzenie indywidualnych bloków liter z modułami tekstowymi

Zanim zaczniemy dodawać animację do liter, musimy najpierw stworzyć osobny moduł tekstowy dla każdej litery, którą chcemy dodać. W tym przykładzie stworzymy tekst „Divi Design”. Ponieważ ta fraza tekstowa zawiera 11 spacji znakowych (w tym spację między literami, będziemy musieli dodać 11 różnych modułów tekstowych.

Śmiało i dodaj moduł tekstowy do kolumny.

W polu treści dodaj pierwszą literę swojego tekstu, która w tym przypadku jest literą „d”.

Następnie zaktualizuj ustawienia projektu tekstu w następujący sposób:

• Czcionka tekstu: Rubik
• Styl czcionki tekstu: TT
• Kolor tekstu: #ffffff
• Tekst Rozmiar tekstu: 80px (komputer), 50px (tablet), 30px (telefon)
• Wysokość linii tekstu: 1,6 em
• Orientacja tekstu: środek

Następnie dodaj animację do modułu tekstowego w następujący sposób:

• Styl animacji: slajd
• Kierunek animacji: w górę
• Czas trwania animacji: 600 ms
• Opóźnienie animacji: 100 ms
• Początkowe krycie animacji: 100%

Powiel moduł tekstowy i zaktualizuj zawartość literą „i”. Następnie zwiększ opóźnienie animacji o 100 ms w następujący sposób:

• Opóźnienie animacji: 200 ms

Powiel moduł tekstowy i zaktualizuj zawartość literą „v”. Następnie zwiększ opóźnienie animacji do 300 ms.

• Opóźnienie animacji: 300 ms

Powiel moduł tekstowy i zaktualizuj zawartość literą „i”. Następnie zwiększ opóźnienie animacji do 400 ms.

• Opóźnienie animacji: 400 ms

W kolejnym module tekstowym chcemy dodać spację. Zduplikuj moduł tekstowy i dodaj następujący kod html do pola treści:

 

Nie ma potrzeby aktualizowania opóźnienia animacji w tym przypadku.

Następnie zduplikuj moduł tekstowy i zaktualizuj zawartość literą „d”. To pierwsza litera słowa „design”. Następnie zwiększ opóźnienie animacji do 500 ms.

• Opóźnienie animacji: 500 ms

Kontynuuj proces powielania modułu tekstowego i zwiększania opóźnienia animacji o 100 ms dla każdej z pozostałych liter, które składają się na słowo „projekt”.

• Litera „e”: opóźnienie animacji 600ms
• Litera „s”: opóźnienie animacji 700ms
• Litera „i”: opóźnienie animacji 800ms
• Litera „g”: opóźnienie animacji 900ms
• Litera „n”: opóźnienie animacji 1000ms

Oto jak wygląda projekt do tej pory.

Dodanie właściwości Flex, aby wyrównać moduły w poziomie

Nie jest to jeszcze wynik, którego szukamy. Ale wszystko, co musimy zrobić, aby magicznie połączyć projekt, to dodać mały fragment CSS do kolumny wiersza. Aby to zrobić, otwórz ustawienia wiersza i dodaj następujący niestandardowy kod CSS do głównego elementu kolumny.

display: flex;

Właściwość display: flex wyrównuje wszystkie moduły poziomo w elastycznej tabeli, która pięknie dopasowuje się do różnych szerokości przeglądarki. A ponieważ moduły są w jednym rzędzie, projekt nie zepsuje się na tablecie lub urządzeniach mobilnych.

Musimy również dodać niestandardową szerokość rynny, aby usunąć dolny margines pod literami i dodać górne i dolne wypełnienie do rzędu, aby litery miały trochę miejsca na animację.

• Szerokość rynny: 1
• Niestandardowe wypełnienie: 5vw góra, 5vw dół

Oto ostateczny wynik.

Dodawanie różnych stylów animacji

Dzięki tej konfiguracji możesz łatwo dodawać nowe style animacji, aby uzyskać całkowicie unikalne efekty. Aby to zrobić, możesz skorzystać z funkcji wielokrotnego wyboru Divi, aby zaktualizować wszystkie moduły jednocześnie. W interfejsie przytrzymaj klawisz Shift i kliknij pierwszy i ostatni moduł tekstowy. Następnie otwórz ustawienia dla jednego z wybranych modułów.

Spowoduje to otwarcie modu ustawień elementów, który pozwoli Ci zaktualizować ustawienia dla wszystkich wybranych modułów. Nie chcemy zmieniać opóźnienia animacji, ponieważ chcemy zachować efekt kaskadowy na każdej z liter. Możemy jednak aktualizować inne opcje animacji na różne sposoby, aby uzyskać całkowicie unikalne wyniki.

Sugeruję powielenie sekcji przed testowaniem nowej animacji, aby zachować poprzednie przykłady.

Oto kilka przykładów.

Animacja tekstu powiększenia wstecznego

Aby animować litery z efektem odwróconego powiększenia, zaktualizuj ustawienia elementu (ustawienia dla wszystkich modułów) o następujące elementy:

• Styl animacji: Zoom
• Kierunek animacji: Centrum
• Intensywność animacji: 200%

Oto ostateczny wynik.

Animacja tekstu toczącej się fali

Aby animować litery z efektem toczącej się fali, zaktualizuj ustawienia elementu (ustawienia dla wszystkich modułów) o następujące elementy:

• Styl animacji: Obróć
• Kierunek animacji: w górę
• Intensywność animacji: 100%

Oto ostateczny wynik.

Animacja tekstu Domino

Aby animować tekst z efektem domina, zaktualizuj ustawienia elementu (ustawienia dla wszystkich modułów) o następujące elementy:

• Styl animacji: Odwróć
• Kierunek animacji: w lewo
• Intensywność animacji: 100%

Oto ostateczny wynik.

Animacja tekstu stand-up

Aby animować tekst z efektem domina, zaktualizuj ustawienia elementu (ustawienia dla wszystkich modułów) o następujące elementy:

• Styl animacji: składanie
• Kierunek animacji: w górę
• Intensywność animacji: 100%

Następnie dodaj perspektywę, aby utworzyć element projektu 3D, dodając następujący kod CSS do elementu kolumny głównej w ustawieniach wiersza.

Kod CSS elementu kolumny głównej:

perspective: 1000px;

Oto ostateczny wynik.

Animuj litery za pomocą kombinacji kierunków animacji

Jeśli chcesz być bardziej kreatywny, możesz animować litery za pomocą kombinacji efektów animacji. W tym przykładzie użyję kombinacji kierunków animacji i intensywności stylu slajdu. To da nam zupełnie wyjątkową prezentację.

Oto jak to zrobić.

Najpierw skopiuj jedną z sekcji, które zbudowaliśmy wcześniej, abyśmy mogli rozpocząć proces projektowania.

Następnie usuń pierwsze 4 moduły tekstowe, tak aby wyświetlany był tylko tekst „design”.

Ustawienia sekcji

Następnie, ponieważ chcemy, aby niektóre litery w animacji zaczynały się poza rzutnią przekroju, będziemy musieli dodać mały fragment CSS do ustawień przekroju w następujący sposób:

overflow: hidden;

Dzięki temu litery będą ukryte, dopóki nie wejdą do sekcji.

Ustawienia wiersza

Teraz, aby upewnić się, że nasze moduły tekstowe (litery) pozostają wyśrodkowane, musimy dodać następujący css do ustawień wiersza:

display:flex;
justify-content: center;

Wspólne ustawienia modułu tekstowego

Korzystając z funkcji wielokrotnego wyboru, zaktualizuj wszystkie sześć modułów tekstowych za pomocą następujących ustawień elementów:

• Margines niestandardowy: 3% po lewej, 3% po prawej
• Szerokość obramowania: 1px
• Kolor obramowania: #ffffff

• Styl animacji: slajd
• Czas trwania animacji: 2000 ms
• Opóźnienie animacji: 100 ms
• Intensywność animacji: 300%

To zajmuje się podstawowymi ustawieniami animacji, które będą wspólne dla wszystkich modułów tekstowych. Teraz możemy dostosować ustawienia animacji dla nich indywidualnie.

Indywidualne ustawienia modułu tekstowego

W tym momencie możemy się trochę zabawić, dostosowując ustawienia poszczególnych modułów tekstowych, aby zmienić kierunek animacji dla każdego z nich. To pozwoli nam animować litery w zupełnie wyjątkowy sposób. Dla każdej litery zaktualizuj kierunek i intensywność animacji w następujący sposób:

• Litera D
  Kierunek animacji: w górę
• Litera E
  Kierunek animacji: w dół
• Listy
  Kierunek animacji: w lewo
  Intensywność animacji: 80%
• Litera I
  Kierunek animacji: w prawo
  Intensywność animacji: 80%
• Litera G
  Kierunek animacji: w dół
• Litera N
  Kierunek animacji: w górę

Oto ostateczny projekt.

A oto jak to wygląda na telefonie komórkowym.

Końcowe przemyślenia

Myślę, że można śmiało powiedzieć, że Divi ma wiele sposobów na animowanie liter, gdy masz odpowiednią konfigurację. I muszę powiedzieć, że podczas tworzenia tych przykładów dość trudno było przestać bawić się ustawieniami animacji. Jest tak wiele możliwych odmian do wypróbowania! W każdym razie mam nadzieję, że to da ci trochę inspiracji do twojego następnego projektu. Jeśli już, możesz go zbudować tylko dla zabawy.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!