Cum se adaugă animații text avansate în interiorul Divi cu Letterize.js și Anime.js

Animațiile încorporate ale Divi oferă o mulțime de posibilități atunci când vine vorba de adăugarea acestui avantaj suplimentar site-ului dvs. web. Aceste animații, totuși, vă permit să adăugați o animație la un container odată. Deși, în majoritatea cazurilor, acest lucru este de obicei mai mult decât suficient, există proiecte în care veți dori să mergeți mai departe. De exemplu, s-ar putea să doriți să adăugați animații text avansate. În acest tutorial, vă vom arăta exact cum să faceți acest lucru. Acest tutorial este un pas important dacă doriți să aflați cum să combinați Divi, ca cadru, cu biblioteci Javascript externe. Vom crea întregul nostru design folosind elementele și opțiunile încorporate ale Divi, apoi vom viza modulul nostru text cu bibliotecile letterize.js și anime.js pentru a crea animații text avansate. Odată ce ați înțeles abordarea, veți putea crea orice fel de animație avansată de text pe care vi-o puteți imagina!

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați gratuit Advanced Layouts Animations Text

Pentru a pune mâna pe aspectul gratuit de animație avansată de text, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

1. Creați proiectarea secțiunii Hero

Adăugați o secțiune nouă

Spațiere

Începeți prin a crea o pagină nouă sau a deschide una existentă. În interiorul paginii dvs., adăugați o nouă secțiune. Deschideți setările secțiunii și modificați căptușeala superioară și inferioară pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 180 px (desktop), 100 px (tabletă), 50 px (telefon)
• Căptușeală inferioară: 180 px (desktop), 100 px (tabletă), 50 px (telefon)

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Spațiere

Fără a adăuga încă module, deschideți setările rândului și eliminați toate umpluturile implicite de jos.

• Căptușeală inferioară: 0 px

Adăugați modulul de text nr. 1 în coloană

Adăugați o copie H1

Singurul modul de care avem nevoie în acest rând este un modul de text. Adăugați conținut H1 la alegere.

Setări text H1

Treceți la fila de proiectare a modulului și modificați setările de text H1 după cum urmează:

• Titlu Font: Montserrat
• Culoare text antet: rgba (232.232.232,0.41)
• Dimensiune text antet: 80 px (desktop), 50 px (tabletă), 40 px (telefon)
• Distanța între litere: -10px (desktop), -4px (tabletă), -3px (telefon)
• Înălțimea liniei de direcție: 0.6em (desktop), 0.7em (tabletă), 0.8em (telefon)

Adăugați rândul # 2

Structura coloanei

Adăugați un alt rând chiar sub cel anterior folosind următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și modificați lățimea maximă în setările de dimensionare.

• Lățime maximă: 1680 px

Spațiere

Eliminați toate marginile de jos și căptușeala în continuare.

• Marja inferioară: 0 px
• Căptușeală inferioară: 0 px

Adăugați modulul de imagine în coloană

Încărcați ilustrația

Apoi, adăugați un modul de imagine și încărcați ilustrația gratuită pe care o puteți găsi în folderul pe care l-ați putut descărca la începutul acestei postări.

Dimensionare

Treceți la fila de proiectare a modulului și forțați lățimea completă a imaginii.

• Forțează lățimea completă: Da

Spațiere

Adăugați o marjă de jos negativă în continuare.

• Marja inferioară: -12%

Animaţie

Și completați setările modulului adăugând următoarele setări de animație:

• Stil de animație: Fade
• Întârziere animație: 3000 ms

Adăugați rândul # 3

Structura coloanei

La următorul și ultimul rând. Utilizați următoarea structură de coloane:

Spațiere

Treceți la fila de proiectare a rândului și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 10%
• Căptușeală inferioară: 5%
• Căptușeală stângă: 3%
• Căptușeală dreaptă: 3%

Box Shadow

Apoi, activați o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0.06)

Animaţie

Și completați setările rândului adăugând următoarea animație:

• Stil de animație: Fade
• Întârziere animație: 3000 ms

Adăugați modulul de text nr. 2 în coloană

Adauga continut

E timpul să adăugați module. Primul modul de care avem nevoie este un modul de text cu un conținut de descriere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

• Font text: Lato
• Dimensiune text: 18 px
• Spațiere scrisoare text: 1 px
• Înălțimea liniei textului: 2.7em

Adăugați un modul buton în coloană

Adăugați o copie

Ultimul modul de care avem nevoie este un modul buton. Introduceți o copie la alegere.

Setări buton

Treceți la fila de proiectare a modulului și modificați setările butonului după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 16 px
• Culoarea textului butonului: # 171cff
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px

• Buton Font: Montserrat
• Stilul fontului butonului: majuscule

Spațiere

Apoi, aplicați următoarele valori de umplere în setările de spațiere:

• Căptușeală superioară: 2%
• Căptușeală inferioară: 2%
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

Box Shadow

Completați setările modulului adăugând următoarea umbră de casetă:

• Box Shadow Vertical Position: 5 px
• Puterea răspândirii umbrei cutiei: -2 px
• Culoare umbră: # 171cff

2. Adăugați CSS Class la Headline

Deschideți modulul de text nr. 1 și faceți clic pe fila Text

Acum că avem toate elementele de proiectare la locul lor, este timpul să adăugăm animații text avansate la titlul nostru. Deschideți modulul text care conține copia H1 și selectați fila text.

Adăugați un cod CSS la eticheta H1

În interiorul H1 adăugați un ID CSS personalizat.

• ID = ”headlineCopy”

3. Adăugați Librarii Letterize și Anime

Adăugați un modul de cod în coloană

Pentru a crea animații, folosim bibliotecile letterize.js și anime.js. Pentru a adăuga aceste biblioteci, introduceți un nou modul de cod în coloana ultimului rând.

Adăugați ambele biblioteci

Apoi, adăugați două etichete de script diferite care conțin următoarele surse care duc înapoi la biblioteci:

• 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. Adăugați un cod de animație

Animație pentru scrisoare la nivel individual

În ultima parte a acestui tutorial, vom adăuga codul de animație care face parte din bibliotecile letterize.js și anime.js. Pentru a obține efectul pe care l-ați putut vedea în previzualizarea acestui post, vom aplica două tipuri de animații. Prima animație se aplică fiecărei litere individual și consecutiv. Acest lucru se realizează cu biblioteca letterize.js. Această bibliotecă, în combinație cu prima parte a codului de mai jos, plasează fiecare literă în copie într-un interval separat. Aceste intervale vor fi, apoi, vizate separat pe tot parcursul procesului de animație. Asigurați-vă că plasați codul de mai jos între etichetele de script.

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',
});

});
});

Fiecare funcție de adăugare reprezintă o animație într-o cronologie a animațiilor. Aceste animații se aplică fiecărei litere la nivel individual. Puteți modifica aceste funcții de adăugare oricum doriți, adăugați altele noi sau eliminați cele curente, asigurați-vă că ultima funcție de adăugare este închisă corect cu un „;” la final (așa cum puteți vedea în codul de mai sus). Puteți adăuga diferite proprietăți CSS în aceste funcții de adăugare. Puteți afla mai multe despre proprietăți și modul în care acestea sunt utilizate în exemplele de documentare anime.js. În acest tutorial, am adăugat intenționat mai multe animații pentru a arăta cum funcționează cronologia, dar probabil că veți dori să mergeți cu ceva mai subtil sau mai scurt pentru propriile dvs. proiecte.

Animație pentru propoziție

După ce ați adăugat prima parte a animației, care vizează fiecare literă individual, vom trece la a doua parte a animației noastre. Această parte vizează întreaga copie ca întreg. Abordarea animației este aceeași ca mai sus; plasăm întregul modul într-o animație cronologică. Fiecare funcție de adăugare reprezintă o animație diferită în interiorul acelei cronologii. Puteți modifica aceste funcții de adăugare, adăugați funcții noi sau eliminați cele curente. Asigurați-vă că plasați acest nou cod înainte de terminarea codului scriptului, după cum puteți observa în ecranul de imprimare de mai jos.

anime.timeline({loop: false})

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

})

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

Adăugați CSS personalizat pentru Span

Acum, deoarece am creat un interval separat pentru fiecare dintre literele noastre, va trebui să schimbăm proprietatea de afișare a fiecărui interval pentru a permite literelor să apară una lângă cealaltă. Pentru a face acest lucru, vom adăuga câteva coduri CSS în modulul nostru de cod. Asigurați-vă că plasați codul între etichetele de stil.

#headlineCopy span {
display: inline-block;
}

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați animații text avansate pentru titlul dvs. Am construit întregul design în interiorul Divi și am combinat cadrul cu bibliotecile letterize.js și anime.js. Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.