Cum se adaugă animații în secțiuni / rânduri

A fost odată pe internet, adăugarea de animație pe site-ul dvs. a fost o sarcină greoaie, oarecum specializată. Cu toate acestea, Divi deține instrumente puternice de animație și efecte de derulare pe care le puteți implementa fără a avea nevoie de multă expertiză tehnică. Oricine poate adăuga aceste efecte pe site-urile lor cu un efort minim. În timp ce procesele acestui tutorial pot fi aplicate oricărui element din Divi, ne vom concentra pe secțiuni și rânduri astăzi pentru a obține efecte specifice folosindu-le. Să ne adâncim cu animațiile!

previzualizare

Desktop

Mobil

Încărcați Divi Builder într-o pagină sau o postare

Primul lucru pe care va trebui să-l faceți este să intrați în Divi Builder. Indiferent dacă alegeți unul dintre pachetele noastre de layout (vom folosi pachetul de layout pentru clubul de tenis pentru acest articol) sau un design propriu, toți pașii se desfășoară în cadrul setărilor Secțiune și Rând .

Cu acest design, vom anima 1 secțiune și 3 rânduri pentru a obține un efect de încărcare secvențială.

Alegeți un aspect premade

Pentru a aplica unul dintre pachetele noastre de aspect concepute profesional, intrați în Divi Builder și selectați Utilizați un aspect premade . Aceasta va afișa lista tuturor cadourilor pe care le oferim.

Alegeți un aspect

Apoi, alegeți pur și simplu ce pachet de aspect doriți să utilizați. Puteți sorta după categorie sau căuta cuvinte cheie pentru a vedea ce am creat pentru dvs.

Găsiți secțiunile și rândurile pentru a anima

Când aspectul a importat toate activele și pagina este încărcată, veți dori să găsiți secțiunea și rândul (rândurile) la care doriți să adăugați animații. Amintiți-vă, secțiunile sunt codate în culori albastre în Divi Builder, iar rândurile sunt verzi .

Odată cu acest plan, să începem să adăugăm aceste animații!

Cum se adaugă animație în secțiuni și rânduri - Opțiunea 1

Adăugarea unei animații la o secțiune Divi este foarte simplă. Mai întâi trebuie să introduceți setările secțiunii . Apoi, navigați la fila Design și derulați până când vedeți opțiunile de animație .

Sub opțiunile Animație , veți ajusta până la 8 opțiuni diferite pentru animația aleasă.

1. Stiluri de animație este locul în care alegeți modul în care apare animația. Dacă secțiunea se va rostogoli de la capăt la cap sau va sări din partea laterală a paginii ca o minge. Cele mai frecvente sunt Fade și Slide .
2. Direcție - Veți seta direcția spre care se deplasează elementul. O valoare sus înseamnă că secțiunea va începe din partea de jos și se va deplasa în sus. Sus nu este punctul de origine.
3. Durată - Cât durează animația de la început până la sfârșit. O valoare mai mică o va accelera, iar una mai mare o va încetini.
4. Întârziere - Această opțiune împiedică declanșarea animației cât mai curând posibil și poate ajuta la atragerea atenției asupra ei mai mult decât dacă ar declanșa imediat.
5. Intensitate - Cu cât valoarea este mai mică, cu atât este mai netedă decât animația, în timp ce valorile mai mari sunt mai rapide și mai agresive.
6. Pornirea opacității - O valoare 0 va face ca animația să înceapă invizibilă și să se concentreze pe parcursul duratei. 100 înseamnă că elementul este complet vizibil chiar înainte de a începe animația.
7. Curba de viteză - Acest lucru vă va permite să ajustați cât de ușor începe și se termină animația.
8. Repetați - Este animația dvs. un efect unic sau este ceva pe care doriți să îl repetați din nou? Dacă o animație este setată la O dată , pagina trebuie să se reîncarce pentru a o iniția din nou.

Cum se adaugă animație în secțiuni și rânduri - Opțiunea 2

Divi are, de asemenea, o caracteristică numită Scroll Effects . Acestea sunt animații care se declanșează ori de câte ori utilizatorul își derulează fereastra către element. Efectele de derulare pot fi setate la orice element și pot fi combinate cu opțiunile de animație menționate mai sus.

Cum să activați efectele de derulare

Din nou, orice element din Divi poate fi setat să aibă efectele Scroll activate, dar avem de-a face cu secțiuni și rânduri astăzi. Deci, introduceți setările secțiunii , navigați la fila Avansat și găsiți antetul Efecte derulare .

Alegeți Efectele și declanșatoarele

În cadrul opțiunilor Scroll Effects , veți găsi diverse file pentru diferite tipuri de animații pe care le puteți declanșa pe scroll.

• Poziție lipicioasă - Indiferent dacă secțiunea sau rândul se lipesc sau nu de ecranul utilizatorului pe măsură ce derulează.
• Efecte de transformare - Acestea sunt efectele reale de animație: mișcare orizontală și verticală, decolorare în / ieșire, redimensionare dimensiune, rotație și estompare.
• Set [Feature] - Veți putea seta unde efectul este cel mai vizibil pe ecran și când / unde se produce
• Declanșarea efectului de mișcare - Veți determina dacă animația începe când partea de sus a elementului intră în fereastra de vizualizare, în centrul elementului sau în partea de jos.

Diferența principală dintre acestea față de utilizarea opțiunilor de animație din secțiunea anterioară constă în faptul că doriți ca animația să fie automatizată sau dacă doriți ca aceasta să se declanșeze de fiecare dată când utilizatorul efectuează o acțiune. Puteți combina animații utilizând opțiunile Efecte de derulare și animație, pe care le vom folosi pentru efectul tutorialului principal.

Combinarea animațiilor pentru secțiuni și rânduri

Puteți crea unele efecte uimitoare pentru site-urile dvs. combinând diverse animații pentru a declanșa în momente diferite. Utilizând opțiunea Animation Delay , site-ul dvs. poate anima o serie de secțiuni, rânduri și elemente în ordine pentru a scoate în evidență imagini impresionante.

Pentru început, vom seta Stilul animației în setările secțiunii la Slide cu Direcția animației setată la Sus .

Vom menține restul opțiunilor la valorile implicite ale acestora. Mai ales întârzierea animației . Vrem ca secțiunea să se declanșeze atunci când este vizibilă.

Setări de animație pentru rândul 1

Apoi, vom regla primul rând din secțiune. Intrăm în setările Row , mergem la opțiunile de animație din fila Design și selectăm din nou Slide . De data aceasta, vrem să schimbăm direcția în jos și întârzierea animației la 5 00ms . 1000ms este egal cu 1 secundă, amintiți-vă.

Deoarece am lăsat temporizarea secțiunii la 0 ms pentru a se declanșa imediat, dorim ca rândul să fie ușor decalat, permițând ca animația inițială să se termine mai ales înainte ca aceasta să înceapă.

Setări de animație pentru rândul 2

Apoi, vom intra în setările pentru al doilea rând al paginii și vom merge la opțiunile de animație . Din nou, vom selecta Slide pentru stilul de animație , iar acest rând va aluneca spre dreapta .

În plus, vom seta întârzierea animației la 1000 ms , ceea ce înseamnă că aceasta se va declanșa imediat ce se termină prima animație.

Setări de animație pentru rândul 3

Pentru al treilea rând pe care îl animăm, vom folosi Efecte de derulare pentru a ne atinge obiectivele. Deoarece al treilea rând al nostru începe chiar deasupra pliantei, majoritatea animațiilor ar fi nevăzute dacă am folosi pur și simplu o întârziere, așa cum am făcut cu celelalte elemente. Așa că o vom face astfel încât nu este cazul.

Opțiuni de animație

În primul rând, vom repeta procesele de mai sus. Doar cu acest rând, setăm stilul de animație pe Fade. Apoi, vom seta Durata la 500 ms, astfel încât acest rând să apară mai rapid în timpul animației sale. O vom întârzia cu 1500 ms pentru a ne asigura că celelalte animații sunt complet complete înainte ca aceasta să înceapă.

În cele din urmă, asigurați-vă că verificați dacă opacitatea de pornire este setată la 0% . Vrem ca acest rând să fie invizibil până când este gata să fie văzut.

Setări Efecte derulare

Aici lucrurile se distrează pentru că vom combina efecte. Faceți clic pe fila Avansat pentru rând și găsiți Efecte de derulare . Găsiți fila Mișcare orizontală și asigurați-vă că o activați. Apoi setați declanșatorul efectului de mișcare la mijlocul elementului . Folosim mijlocul și nu partea de sus pentru a ne asigura că efectul nu începe să aibă efect până când utilizatorul nu se derulează, doar în cazul în care ecranul utilizatorului arată partea de sus a rândului.

Cu acea setare, rândul va aștepta până când toate celelalte vor fi animate pentru a apărea, iar atunci când utilizatorul se deplasează spre el, întregul rând va apărea pentru a aluneca din partea laterală a ecranului.

Rezultate finale

Când terminați toate acestea, rezultatele dvs. ar trebui să fie similare cu acestea.

Desktop

Mobil

Concluzie

Adăugarea efectelor de animație este un mod sigur de a face site-ul dvs. mai dinamic, mai interesant și mai atrăgător din punct de vedere vizual. Folosind instrumentele de animație și efecte de defilare încorporate ale Divi, puteți crea combinații uimitoare care vor uimi orice vizitator care se întâmplă să se apropie.

Ce ați folosit efectele de animație Divi pentru a crea din secțiunile și rândurile dvs.? Să le vedem în comentarii!

Imagine prezentată de articol de Vectorchok / shutterstock.com