Jak zaprojektować maskę tekstową z animacją tła podczas przewijania w Divi

Projekty masek tekstowych są zaskakująco łatwe do tworzenia dzięki wbudowanym opcjom Divi. Konstruktor ma wszystkie składniki do stworzenia efektu maski tekstowej, w tym opcje stylów tekstu, tła i trybów mieszania. W rzeczywistości już wcześniej stworzyliśmy projekty masek tekstowych przy użyciu trybów mieszania. Ale dzięki efektom przewijania możemy przenieść projekty masek tekstowych na zupełnie nowy poziom.

W tym samouczku pokażemy, jak zaprojektować maskę tekstową z animacją tła podczas przewijania w Divi. Projekt jest wyjątkowy, a efekt przewijania naprawdę ożywia.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekty, które zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go 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 sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Projektowanie maski tekstowej z animacją tła w Divi

Dodaj wiersz

Aby rozpocząć, dodaj wiersz z dwiema kolumnami do domyślnej zwykłej sekcji.

Aktualizuj ustawienia sekcji

Przed dodaniem jakichkolwiek modułów otwórz ustawienia sekcji i zaktualizuj kolor tła i dopełnienie w następujący sposób:

• Kolor tła: #750046

• Padding: 0px na górze, 0px na dole

Aktualizuj ustawienia wiersza

Po skonfigurowaniu ustawień przekroju otwórz ustawienia wiersza i zaktualizuj następujące ustawienia projektu:

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%
• Padding: 0px na górze, 0px na dole

Ważne jest, aby ustawić szerokość rynny na 1, a szerokość na 100%, ponieważ podczas tworzenia projektu maski tekstowej będziemy używać jednostki długości vw dla naszego tekstu. Ponieważ jednostka długości vw jest oparta na szerokości przeglądarki, ważne jest, aby kontenery nadrzędne (sekcja i wiersz) miały taką samą szerokość jak przeglądarka, czyli 100%.

Aktualizuj ustawienia kolumny 1

Nasza maska ​​tekstowa i obraz zostaną dodane do lewej kolumny (kolumna 1). Musimy dodać kolor tła do kolumny, aby tryby mieszania, które dodajemy do obrazu i tekstu, mieszały się / ujawniały ten kolor. Musimy również ustawić przepełnienie na ukryte, aby podczas animowania obrazu podczas przewijania nie widzieliśmy przepełnionego obrazu poza kolumną.

Otwórz ustawienia dla kolumny 1 i zaktualizuj następujące elementy:

• Kolor tła: #750046
• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Tworzenie maski tekstowej

Aby utworzyć maskę tekstową, dodaj moduł tekstowy do kolumny 1.

Treść tekstu

Następnie dodaj słowo „divi” do treści treści. Używamy czteroliterowego słowa, aby układało się równomiernie w kwadratowym projekcie.

Tło tekstu

Następnie dodaj biały kolor tła do modułu tekstowego.

• Kolor tła: #ffffff

Projekt tekstu

Następnie w zakładce projekt zaktualizuj następujące elementy:

• Czcionka tekstu: Rubik Mono One
• Styl czcionki tekstu: TT
• Kolor tekstu tekstu: #000000
• Rozmiar tekstu: 25vw (komputer), 50vw (tablet i telefon)
• Wysokość linii tekstu: 0,8 em
• Wyrównanie tekstu: do środka

• Wyściółka: góra 8vw, dół 8vw

Tryb mieszania tekstu

Aby ukończyć projekt maski tekstowej, dodaj następujący tryb mieszania:

• Tryb mieszania: ekran

Jak dotąd cztery kluczowe składniki tego efektu maski tekstowej są następujące:

1. Tło kolumny
2. Białe tło tekstu
3. Czarny tekst
4. Tryb mieszania ekranu w module tekstowym

Tryb mieszania ekranu mnoży warstwy i tworzy jaśniejszą wersję miksu. W trybie mieszania ekranu czarny tekst staje się całkowicie przezroczysty, ujawniając to, co się za nim kryje, czyli w tym przypadku kolor tła.

Dodaj obraz tła

Aby dodać obraz tła do maski tekstowej, utwórz nowy moduł obrazu i prześlij obraz o wymiarach około 1700 na 2500 pikseli. Rozmiar obrazu jest ważny, aby obraz pokrywał wysokość i szerokość kolumny.

Projekt obrazu

Następnie zaktualizuj następujące ustawienia projektu:

• Wymuś pełną szerokość: TAK
• Tryb mieszania: ekran

Ten tryb mieszania nie jest konieczny do uzyskania efektu maski tekstowej, ale łączy obraz z kolorem tła, aby lepiej pasował do projektu.

Pozycja obrazu

Następnie nadaj obrazowi pozycję bezwzględną i zaktualizuj indeks Z tak, aby znajdował się za modułem tekstowym.

• Pozycja: bezwzględna
• Indeks Z: -1

Efekty przewijania obrazu

Gdy projekt obrazu będzie gotowy, przejdź do zakładki Zaawansowane i zaktualizuj opcje efektu przewijania w następujący sposób:

Na karcie Ruch w pionie

• Przesunięcie początkowe: -1 (przy 0%)
• Przesunięcie środkowe: 0 (przy 50%)
• Przesunięcie końcowe: 1 (przy 100%)

W zakładce Ruch poziomy,

• Przesunięcie początkowe: -0,5 (przy 0%)
• Przesunięcie środkowe: 0 (przy 50%)
• Przesunięcie końcowe: 0,5 (przy 100%)

W zakładce Skalowanie w górę i w dół,

• Skala początkowa: 110% (przy 0%)
• Skala średnia: 125% (przy 50%)
• Skala końcowa: 140% (przy 100%)

Wynik

Możesz dodać górny i dolny margines do sekcji, aby móc sprawdzić dotychczasowy wynik.

Tworzenie pozornego tekstu

W prawej kolumnie dodaj nowy moduł tekstowy.

Zaktualizuj zawartość treści w następujący sposób:

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

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

• Kolor tekstu: jasny
• Czcionka nagłówka 2: Rubik
• Rozmiar tekstu nagłówka 2: 4vw
• Wypełnienie (komputer): 16vw góra, 5vw po lewej, 5vw po prawej
• Wyściółka (tablet): 16vw góra, 16vw dół, 5vw lewy, 5vw prawy

Wynik

Opcjonalne poprawki

Czarne tło / biały tekst

Jeśli chcesz użyć czarnego tła dla maski tekstowej, wystarczy zaktualizować trzy kluczowe opcje, które składają się na efekt maskowania tekstu.

Otwórz ustawienia modułu tekstowego i zmień następujące elementy:

• Kolor tła: #000000 (czarny)
• Tekst Kolor tekstu: #ffffff (biały)
• Tryb mieszania: pomnóż

A oto wynik…

Obracanie obrazu PNG

Możesz zmienić animowany obraz na taki, który ma przezroczyste tło (PNG), aby uzyskać inny fajny efekt. Oto przykład obrazu PNG, którego użyłem z dodanym efektem przewijania.

Ostateczne rezultaty

Oto kolejne spojrzenie na wszystkie projekty.

Końcowe przemyślenia

Mamy nadzieję, że te projekty masek tekstowych z animacją tła na przewijaniu zapewnią kreatywną przewagę, której potrzebowała Twoja witryna. Gdy poznasz podstawowe składniki tworzenia efektu maskowania tekstu, nie będziesz miał problemu z tworzeniem niezliczonych wersji tego projektu, które będą odpowiadać Twoim potrzebom.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!