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.
Dodaj moduł tekstowy
Następnie dodaj nowy moduł tekstowy do kolumny.
Treść
dla treść kolumnie, wklej w polu następujący kod HTML treść:
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
- 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óż.
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.
Wyższe ustawienia separacji
Otwórz ustawienia separatora i wybierz NIE, aby wyświetlić separator.
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
Następnie zaktualizuj wysokość separatora na ekranie telefonu w następujący sposób:
- Wysokość: 15 pikseli (telefon)
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.
Następnie odwróć kolory na gradientowym tle.
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
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ą.
Następnie wybierz NIE, aby wyświetlić separator.
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%
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
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
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
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
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!