Jak dodać zaawansowane animacje tekstu wewnątrz Divi za pomocą Letterize.js i Anime.js

Wbudowane animacje Divi zapewniają mnóstwo możliwości, jeśli chodzi o dodanie dodatkowej przewagi do Twojej witryny. Te animacje umożliwiają jednak jednoczesne dodawanie jednej animacji do jednego kontenera. Chociaż w większości przypadków jest to więcej niż wystarczające, istnieją projekty, w których chcesz pójść o krok dalej. Na przykład możesz chcieć dodać zaawansowane animacje tekstu. W tym samouczku pokażemy Ci dokładnie, jak to zrobić. Ten samouczek jest świetną odskocznią, jeśli chcesz nauczyć się łączyć Divi, jako framework, z zewnętrznymi bibliotekami JavaScript. Stworzymy cały nasz projekt za pomocą wbudowanych elementów i opcji Divi, a następnie skierujemy nasz moduł tekstowy za pomocą bibliotek letterize.js i anime.js, aby stworzyć zaawansowane animacje tekstu. Gdy zrozumiesz podejście, będziesz w stanie stworzyć dowolną zaawansowaną animację tekstu, jaką możesz sobie wyobrazić!

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz Zaawansowany układ animacji tekstowych ZA DARMO

Aby położyć swoje ręce na darmowym, zaawansowanym układzie animacji tekstu, musisz najpierw pobrać go 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!

1. Utwórz projekt sekcji bohatera

Dodaj nową sekcję

Rozstaw

Zacznij od utworzenia nowej strony lub otwarcia istniejącej. Na swojej stronie dodaj nową sekcję. Otwórz ustawienia sekcji i zmodyfikuj górną i dolną część dopełnienia na różnych rozmiarach ekranu.

• Górna wyściółka: 180px (komputer), 100px (tablet), 50px (telefon)
• Dolna wyściółka: 180px (komputer), 100px (tablet), 50px (telefon)

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozstaw

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i usuń wszystkie domyślne dolne dopełnienie.

• Dolna wyściółka: 0px

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj kopię H1

Jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł tekstowy. Dodaj wybrane przez siebie treści H1.

Ustawienia tekstu H1

Przejdź do zakładki projektu modułu i zmodyfikuj ustawienia tekstu H1 w następujący sposób:

• Czcionka nagłówka: Montserrat
• Kolor tekstu nagłówka: rgba (232,232,232,0.41)
• Rozmiar tekstu nagłówka: 80px (komputer), 50px (tablet), 40px (telefon)
• Odstępy między literami nagłówka: -10px (komputer), -4px (tablet), -3px (telefon)
• Wysokość linii nagłówka: 0,6 metra (komputer), 0,7 metra (tablet), 0,8 metra (telefon)

Dodaj wiersz nr 2

Struktura kolumny

Dodaj kolejny wiersz tuż poniżej poprzedniego, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i zmień maksymalną szerokość w ustawieniach rozmiaru.

• Maksymalna szerokość: 1680 pikseli

Rozstaw

Usuń cały dolny margines i dopełnienie.

• Margines dolny: 0px
• Dolna wyściółka: 0px

Dodaj moduł obrazu do kolumny

Prześlij ilustrację

Następnie dodaj moduł obrazu i prześlij bezpłatną ilustrację, którą znajdziesz w folderze, który udało ci się pobrać na początku tego postu.

Rozmiary

Przejdź do zakładki projektu modułu i wymuś pełną szerokość obrazu.

• Wymuś pełną szerokość: tak

Rozstaw

Następnie dodaj trochę ujemnego marginesu dolnego.

• Margines dolny: -12%

Animacja

I uzupełnij ustawienia modułu, dodając następujące ustawienia animacji:

• Styl animacji: zanikanie
• Opóźnienie animacji: 3000 ms

Dodaj wiersz nr 3

Struktura kolumny

Przejdź do następnego i ostatniego rzędu. Użyj następującej struktury kolumn:

Rozstaw

Przejdź do karty projektu wiersza i dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 10%
• Dolna wyściółka: 5%
• Lewa wyściółka: 3%
• Prawa wyściółka: 3%

Cień Pudełka

Następnie włącz subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba (0,0,0,0,06)

Animacja

I uzupełnij ustawienia wiersza, dodając następującą animację:

• Styl animacji: zanikanie
• Opóźnienie animacji: 3000 ms

Dodaj moduł tekstowy nr 2 do kolumny

Dodaj zawartość

Czas dodać moduły. Pierwszym modułem, którego potrzebujemy, jest moduł tekstowy z pewną zawartością opisu.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i odpowiednio zmodyfikuj ustawienia tekstu:

• Czcionka tekstu: Lato
• Rozmiar tekstu: 18px
• Odstępy między literami tekstu: 1px
• Wysokość linii tekstu: 2,7 em

Dodaj moduł przycisku do kolumny

Dodaj kopię

Ostatnim modułem, którego potrzebujemy, jest moduł przycisku. Wprowadź wybraną kopię.

Ustawienia przycisków

Przejdź do zakładki projektowania modułu i zmień ustawienia przycisków w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 16px
• Kolor tekstu przycisku: #171cff
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px

• Czcionka przycisku: Montserrat
• Styl czcionki przycisku: wielkie litery

Rozstaw

Następnie zastosuj następujące wartości dopełnienia w ustawieniach odstępów:

• Górna wyściółka: 2%
• Dolna wyściółka: 2%
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Cień Pudełka

Uzupełnij ustawienia modułu, dodając następujący cień pudełka:

• Pozycja pionowa cienia pudełka: 5px
• Siła rozprzestrzeniania się cieni w pudełku: -2px
• Kolor cienia: #171cff

2. Dodaj klasę CSS do nagłówka

Otwórz moduł tekstowy nr 1 i kliknij kartę Tekst

Teraz, gdy mamy już wszystkie elementy projektu, nadszedł czas, aby dodać zaawansowane animacje tekstu do naszego nagłówka. Otwórz moduł tekstowy zawierający kopię H1 i wybierz zakładkę tekstową.

Dodaj identyfikator CSS do tagu H1

Wewnątrz H1 dodaj niestandardowy identyfikator CSS.

• ID=”kopia nagłówka”

3. Dodaj biblioteki Letterize i Anime

Dodaj moduł kodu do kolumny

Do tworzenia animacji używamy bibliotek letterize.js i anime.js. Aby dodać te biblioteki, wstaw nowy moduł kodu w kolumnie ostatniego wiersza.

Dodaj obie biblioteki

Następnie dodaj dwa różne tagi skryptu zawierające następujące źródła, które prowadzą z powrotem do bibliotek:

• src=”https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js”
• src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

4. Dodaj kod animacji

Animacja do listu na poziomie indywidualnym

W ostatniej części tego samouczka dodamy kod animacji, który jest częścią bibliotek letterize.js i anime.js. Aby osiągnąć efekt, który widzieliście na podglądzie tego posta, zastosujemy dwa rodzaje animacji. Pierwsza animacja jest nakładana na każdą literę indywidualnie i kolejno. Osiąga się to dzięki bibliotece letterize.js. Ta biblioteka, w połączeniu z pierwszą częścią poniższego kodu, umieszcza każdą literę w Twojej kopii w osobnym zakresie. Te rozpiętości będą zatem oddzielnie kierowane przez cały proces animacji. Upewnij się, że umieszczasz poniższy kod pomiędzy tagami skryptu.

jQuery(function($){
$(document).ready(function(){

var headlineCopy = new Letterize({
targets: "#headlineCopy"
});

var animation = anime.timeline({
targets: '#headlineCopy span',
delay: anime.stagger(20),
loop: false
});

animation
.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
})

.add({
color: '#00FFF7',
})

.add({
color: '#D2BEFB',
})

.add({
color: '#171cff',
});

});
});

Każda funkcja dodawania reprezentuje animację na osi czasu animacji. Te animacje dotyczą każdej litery na indywidualnym poziomie. Możesz dowolnie modyfikować te funkcje dodawania, dodawać nowe lub usuwać obecne, po prostu upewnij się, że ostatnia funkcja dodawania jest poprawnie zamknięta za pomocą ';' na końcu (jak widać w powyższym kodzie). Możesz dodać różne właściwości CSS w tych funkcjach dodawania. Możesz dowiedzieć się więcej o właściwościach i sposobie ich użycia w przykładach dokumentacji anime.js. W tym samouczku celowo dodaliśmy wiele animacji, aby pokazać, jak działa oś czasu, ale prawdopodobnie będziesz chciał wybrać coś bardziej subtelnego lub krótszego do własnych projektów.

Animacja do zdania

Po dodaniu pierwszej części animacji, która odnosi się do każdej litery z osobna, przejdziemy do drugiej części naszej animacji. Ta część dotyczy całej kopii jako całości. Podejście do animacji jest takie samo jak powyżej; umieszczamy cały moduł w animacji na osi czasu. Każda funkcja dodawania reprezentuje inną animację na tej osi czasu. Możesz modyfikować te funkcje dodawania, dodawać nowe lub usuwać obecne. Upewnij się, że umieściłeś ten nowy kod przed końcem kodu skryptu, jak możesz zauważyć na poniższym zrzucie ekranu.

anime.timeline({loop: false})

.add({
targets: '#headlineCopy',
lineHeight: '1em',
delay: '1500'

})

.add({
targets: '#headlineCopy',
translateX: ['-5%', 0],
letterSpacing: '-2px',
});

Dodaj niestandardowy CSS dla Hiszpanii

Teraz, ponieważ utworzyliśmy osobny zakres dla każdej z naszych liter, musimy zmienić właściwość wyświetlania każdego zakresu, aby umożliwić wyświetlanie liter obok siebie. Aby to zrobić, dodamy trochę kodu CSS do naszego modułu kodu. Upewnij się, że umieszczasz kod pomiędzy tagami stylu.

#headlineCopy span {
display: inline-block;
}

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak tworzyć zaawansowane animacje tekstowe do nagłówka. Zbudowaliśmy cały projekt w Divi i połączyliśmy framework z bibliotekami letterize.js i anime.js. Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.