Przejdź do głównej treści

Jak stworzyć kolorowe tło tekstowe Przewiń animację za pomocą Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Tworzenie animacji przewijania tekstu w tle to unikalny sposób dodawania kolorowych animowanych tekstur do tekstu witryny podczas przewijania strony przez użytkownika. Dzięki Divi proces jest zaskakująco łatwy, gdy nauczysz się kilku kluczowych technik.

W tym samouczku wykorzystamy moc wbudowanych ustawień Divi, aby stworzyć 3 unikalne projekty zawierające kolorowe animacje przewijania tekstu. Pokażemy nawet, jak stworzyć ciemną wersję każdego projektu, aby uzyskać zupełnie nowy wygląd.

Zacznijmy!

Możliwy wynik

Oto przegląd projektów, które dzisiaj zbudujemy.

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ł separacji za modułem tekstowym z filtrem ekranowym.

Dodaj kolumnę

Aby rozpocząć, dodaj wiersz kolumny do sekcji domyślnej.

Dodaj moduł tekstowy

Następnie dodaj nowy moduł tekstowy do kolumny.

Treść

Aby wyświetlić zawartość kolumny, wklej następujący kod HTML w polu zawartości:

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: środek
  • Kolor tekstu nagłówka: # 000000
  • Rozmiar tekstu nagłówka: 200 pikseli (komputer stacjonarny), 80 pikseli (telefon)
  • Odstępy między literami tytułu: 0.15 em
  • Wysokość linii tytułowej: 1em

Wypełnienie i filtr

Teraz musimy dodać trochę wypełnienia i filtr ekranu do modułu tekstowego. Filtr jest niezbędny do działania tego projektu, ponieważ pozwala to na wyświetlanie kolorów / modułów tła za tekstem.

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

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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

Uwaga: Scalanie ekranu działa najlepiej z czarnym tekstem na białym tle. Gdybyśmy chcieli użyć białego tekstu na czarnym tle, skorzystalibyśmy z trybu mnożenia.

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.

efekty przewijania tła tekstu divi

Następnie zaktualizuj tło i ustaw dzielnik w tym samym trybie 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órny separator, skopiuj poprzedni dolny separator i przeciągnij go nad moduł tekstowy, używając obszaru wyświetlania warstwy.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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 tego pierwszego projektu jest dzielnik, którego użyjemy do animacji koloru tła tekstu na zwoju. Aby to zrobić, dodaj nowy moduł separacji pod dolnym separatorem.

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

Ustawienia dzielnika 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 wysoka, aby pokolorować cały nasz tekst w module tekstowym oraz separatory górny i dolny. Dla tego projektu ustaw wysokość na 400 pikseli.

  • Wysokość: 400px

Następnie ustaw dzielnik w pozycji absolutnej, 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 dzielnika tła

Po ustawieniu separatora wszystko, co musimy zrobić, to przesunąć separator za tekst za pomocą przewijanych efektów Divi. W tym projekcie dodamy po prostu ruch poziomy na zwoju.

Zaktualizuj następujące elementy:

W zakładce 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

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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

Upewnij się również, że ustawiłeś wyzwalacz efektu ruchu na środku elementu:

  • Wyzwalacz efektu ruchu: ś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 tekstowego przedstawione w tym artykule działałyby idealnie jako projekty statyczne bez ruchu dodawania na zwoju. Jednak dodatkowe efekty przewijania naprawdę przenoszą projekt na zupełnie nowy poziom. Nie wahaj się eksperymentować z większą ilością kolorów i efektów!

Czekam na kontakt z Państwem w komentarzach.

Do twojego zdrowia!

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
0 akcji
udział
ćwierkanie
Enregistrer