Tworzenie animacji przewijania tła tekstu to wyjątkowy sposób na dodanie kolorowych animowanych tekstur do tekstu. Witryna internetowa gdy użytkownik przewija stronę. Z Divi, proces jest zaskakująco łatwy, gdy poznasz kilka kluczowych technik.

W tym samouczku wykorzystamy tylko moc wbudowanych parametrów Divi stworzyć 3 unikalne projekty, które zawierają kolorową animację przewijania tekstu w tle. Pokażemy Ci nawet, jak stworzyć ciemną wersję każdego projektu, aby uzyskać zupełnie nowy wygląd.

Zacznijmy!

Możliwy wynik

Oto rzut oka na projekty, które będziemy dzisiaj budować.

Projekt 1: Gradient tła tekstu z efektem przewijania w poziomie

Ten pierwszy projekt będzie zawierał efekt przewijania w poziomie, który animuje kolorowy moduł separatora za modułem tekstowym z filtrem ekranowym.

Dodaj kolumnę

Aby rozpocząć, dodaj wiersz z jedną kolumną do sekcji domyślnej.

Wybierz układ kolumn Divi

Dodaj moduł tekstowy

Następnie dodaj nowy moduł tekstowy do kolumny.

Dodaj moduł tekstowy divi

Treść

dla treść kolumnie, wklej w polu następujący kod HTML treść:

Zapisz kod fragmentu

Formatowanie tekstu

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

  • Kolor tła: #ffffff
  • Styl czcionki tekstu: TT
  • Kolor tekstu: # 000000
  • Rozmiar tekstu: 100 pikseli (komputer stacjonarny), 40 pikseli (telefon)
  • Odstępy między literami: 0.15em
  • Wysokość linii tekstu: 1em
  • Wyrównanie tekstu: środek
Dostosowanie tekstu Divi
  • Czcionka tytułu: Merriweather
  • Waga czcionki tytułu: pogrubiona
  • Styl czcionki tytułu: TT
  • Wyrównanie tekstu nagłówka: do środka
  • Kolor tekstu nagłówka: # 000000
  • Rozmiar tekstu nagłówka: 200px (komputer), 80px (telefon)
  • Odstępy między literami tytułu: 0.15 em
  • Wysokość linii tytułowej: 1em

Wypełnienie i filtr

Teraz musimy dodać dopełnienie i filtr ekranowy do modułu tekstowego. Filtr jest potrzebny, aby ten projekt działał, ponieważ umożliwia wyświetlanie kolorów / modów tła za tekstem.

Aby dodać wypełnienie i filtr, zaktualizuj następujące elementy:

  • wypełnienie: 15 pikseli wysokości, 20 pikseli wysokości
  • Tryb mieszania: ekran

Uwaga: Tryb mieszania ekranu działa najlepiej z czarnym tekstem na białym tle. Gdybyśmy chcieli użyć białego tekstu na czarnym tle, użylibyśmy trybu mieszania Pomnóż.

Konfiguracja odstępów między modułami tekstowymi Divi

Górny i dolny separator

Gdy nasz moduł tekstowy będzie gotowy, dodajmy separatory (powyżej i jeden poniżej modułu tekstowego) dla dodatkowego elementu projektu.

Dodaj dolny separator

Dodaj nowy moduł separacji pod modułem tekstowym.

Dodaj moduł separatora divi
Wyższe ustawienia separacji

Otwórz ustawienia separatora i wybierz NIE, aby wyświetlić separator.

efekty przewijania tła tekstu divi

Następnie zaktualizuj tło i nadaj rozdzielaczowi ten sam tryb mieszania co moduł tekstowy w następujący sposób:

  • Kolor tła gradientu po lewej: # 000000
  • Gradientowy kolor tła po prawej: #ffffff
  • Kierunek gradientu: 90deg
  • Pozycja początkowa: 48%
  • Pozycja końcowa: 0%
  • Tryb mieszania: ekran
Konfiguracja separatora kolorów

Następnie zaktualizuj wysokość separatora na ekranie telefonu w następujący sposób:

  • Wysokość: 15 pikseli (telefon)
Konfiguracja separatora Divi

Dodaj górny separator

Aby utworzyć górną linię podziału, zduplikuj poprzednią dolną separator i przeciągnij ją nad moduł tekstowy, korzystając z obszaru wyświetlania warstw.

Przegroda

Następnie odwróć kolory na gradientowym tle.

Wstawianie w tle gradientu

Zaktualizuj parametry linii

Gdy nasze górne i dolne separatory są na miejscu, zaktualizuj parametry linii w następujący sposób:

  • Szerokość rynny: 1 (aby usunąć dolne marginesy między modułami)
  • Maksymalna szerokość: 600 pikseli (aby zachować spójny wygląd na pulpicie i tablecie)
  • Wyrównanie linii: środek
  • Wypełnienie: 0px wysoki, 0px niski
  • Przelew poziomy: ukryty
  • Przelew pionowy: ukryty
Dostosuj parametr linii divi

Utwórz separator dla koloru tła animowanego tekstu

Ostatnim elementem pierwszego projektu jest separator, którego użyjemy do animacji koloru tła tekstu na zwoju. Aby to zrobić, dodaj nowy moduł separacji pod dolną przegrodą.

Wstawianie separatora

Następnie wybierz NIE, aby wyświetlić separator.

Pokaż divi seprator

Ustawienia separatora tła

Zaktualizuj separator za pomocą gradientowego tła w następujący sposób:

  • Kolor tła gradientu po lewej: # e02b20
  • Kolor gradientu prawego tła: # 8300e9
  • Kierunek gradientu: 90deg
  • Pozycja początkowa: 30%
  • Pozycja końcowa: 70%
Przegroda tylna Divi

Chcemy, aby wysokość separatora była wystarczająco duża, aby pokolorować cały nasz tekst w module tekstowym oraz separatory górny i dolny. W przypadku tego projektu ustaw wysokość na 400 pikseli.

  • Wysokość: 400px
Przegroda podziału wysokości

Następnie nadaj rozdzielaczowi absolutną pozycję, aby ustawić go bezpośrednio nad innymi modułami. Użyj indeksu Z, aby umieścić separator za innymi modułami.

  • Pozycja: absolutna
  • Indeks Z: -1
Separator indeksu
Efekty przewijania separatora tła

Po ustawieniu separatora wystarczy, że przesuniemy go za tekst, korzystając z efektów przewijania Divi. W tym projekcie po prostu dodamy poziomy ruch na zwoju.

Zaktualizuj następujące elementy:

Na karcie Ruch poziomy ...

Biuro

  • Aktywuj ruch poziomy: TAK
  • Rozpocznij przesunięcie: 6 (przy 20%)
  • Średnie przesunięcie: 0 (przy 40% -60%)
  • Przesunięcie końcowe: -6 (przy 80%)

Telefon

  • Rozpocznij przesunięcie: 3
  • Przesunięcie końcowe: -3

Pamiętaj też, aby ustawić wyzwalacz dla efektu ruchu w środku klipu:

  • Efekt ruchu wyzwalania: środek elementu
Konfiguracja animacji

Dodaj odstępy między sekcjami

Aby utworzyć tymczasowe miejsce do przewijania w celu przetestowania projektu, dodaj do sekcji:

  • Margines: 80vh powyżej, 80vh poniżej
Sekcja rozmiaru konfiguracji divi

końcowe przemyślenia

Projekty animacji tła tekstu przedstawione w tym artykule w rzeczywistości działałyby dobrze jako projekt statyczny bez dodatkowego ruchu na przewijaniu. Jednak dodatkowe efekty przewijania naprawdę przenoszą projekt na zupełnie nowy poziom. Zapraszam do eksperymentowania z większą liczbą kolorów i efektów!

Nie mogę się doczekać, aby usłyszeć od Ciebie w komentarzach.

Do twojego zdrowia!