Astăzi am fost informați despre o nouă actualizare la Divi care oferă așa-numitele efecte de animație de defilare. L-am aruncat o privire și în acest tutorial vom rezuma la ce ar trebui să vă așteptați.

Să începem.

Care sunt efectele de defilare?

Efectele de defilare sunt animații personalizabile care reacționează la dvs vizitatori pe măsură ce derulează în sus și în jos pe pagină. Spre deosebire de animațiile tradiționale, efectele de defilare sunt direct legate de comportamentul de defilare al dvs vizitator. Viteza și direcția animației se bazează pe viteza și direcția derulării animației. vizitator. Cronologia animației se bazează pe poziția elementului în fereastra browserului.

Sună complicat, dar cu Divi, este destul de simplu

Orice element poate fi animat folosind o combinație de scară, rotație, mișcare orizontală și verticală, opacitate și efecte de estompare. Atunci controlezi amploarea fiecărui efect în diferite puncte ale animației Divi se ocupă de restul, creând tranziții frumoase pe măsură ce aceste elemente intră și se mișcă în vederea dvs. vizitator. Creați animații simple care adaugă profunzime subtilă și sofisticare sau combină efecte și animați mai multe elemente pentru a crea explozii spectaculoase de activitate care vă vor uimi vizitatori!

6 noi șase efecte unice

Efecte disponibile pentru a alege dintre sau în combinații. Divi vine cu șase efecte de defilare diferite, fiecare dintre acestea putând fi personalizate individual folosind noua noastră interfață cu utilizatorul de efecte de defilare. De asemenea, puteți combina oricare dintre efecte pentru a crea animații mai complexe.

Mișcare verticală

Efectul de mișcare verticală permite oricărui element să se deplaseze în sus și în jos pe pagină pe baza vitezei și direcției de derulare a vizitatorului. Rezultatul este un efect de paralaxă! Acum totul poate fi folosit pentru a crea efecte de paralaxă cu Divi. Puteți chiar combina mișcarea verticală cu imagini de fundal de paralaxă pentru a crea modele cu adevărat impresionante.

Setări imagine Divi

Mișcare orizontală

Efectul de mișcare orizontală este similar cu efectul de mișcare verticală, cu excepția faptului că permite elementelor să fie mutate de la stânga la dreapta pe ecran în funcție de direcția și viteza de derulare a unui vizitator. . Puteți chiar combina mișcarea verticală și orizontală, oferindu-vă un control complet asupra mișcării oricărui element!

Efecte de animație Divi

Neclaritate contextuală

Efectul de estompare va aduce elementele în și în afara focalizării, în funcție de viteza și direcția pe care o parcurge vizitatorul. Deoarece Divi vă permite să controlați valorile de estompare de la început, mijloc și sfârșit, puteți aduce elementele în focalizare chiar atunci când sunt în fața ochilor vizitatorului. Este o modalitate excelentă de a atrage atenția asupra informațiilor importante.

Setarea de estompare contextuală Divi

topit

Efectul de estompare cu elemente se estompează în funcție de viteza și direcția derulării unui vizitator. Puteți amesteca elemente, le puteți face să dispară sau ambele. Combinația de estompare, estompare și scară poate crea unele animații cu adevărat sofisticate care adaugă un factor suplimentar „it” design-urilor.

Efect de estompare Divi

Efect de scalare

Efectul de scară va crește sau micșora dimensiunea oricărui articol, în funcție de viteza și direcția derulării unui vizitator. Dacă doriți să atrageți atenția asupra unui anumit element, cum ar fi un apel la acțiune, puteți seta efectul de scară pentru a crește dimensiunea elementului pe măsură ce se apropie de centrul cadrului. fereastră. Desigur, există și multe alte posibilități!

Efect de scalare

Efect de rotație

Efectul de rotație cu rotește un articol în ambele direcții pe baza vitezei și direcției de derulare a vizitatorului. Rotația subtilă poate aduce cu adevărat scene la viață. Doar un pic de rotire atunci când este combinat cu mișcarea orizontală poate arăta grozav! Sau lăsați elementele să se rotească în cercuri.

Reglaje imagine efect de rotație divi

O nouă interfață intuitivă

Adevărata frumusețe a efectelor de derulare a lui Divi este ușurința lor de utilizare! Există o nouă interfață cu utilizatorul care simplifică procesul de creare a animațiilor web, astfel încât acestea să fie accesibile tuturor. Cu un singur clic, puteți adăuga sau combina unul dintre cele șase efecte de derulare ale Divi. Chiar ieșiți din cutie, vor arăta grozav! Apoi, puteți regla fin efectele pentru a crea animații și mai avansate.

Un singur clic și atât!

Doriți să adăugați un efect de derulare la un modul? Un singur clic va adăuga efectul și va arăta grozav și! Pentru a adăuga un efect de derulare, pur și simplu accesați noul grup de opțiuni Efecte de derulare din fila Avansat a oricărui modul, rând, coloană sau secțiune. Efecte multiple pot fi activate în același timp, iar efectele vor fi combinate într-o animație lină care se transformă frumos pe măsură ce derulați.

Vrei un control deplin? îl aveți !

După ce ați activat un efect de derulare, aveți control deplin asupra magnitudinii efectului în fiecare punct al animației. Controlând valorile inițiale, medii și finale, controlați ce face animaţie. Odată ce valorile sunt setate, Divi se ocupă de restul și va face tranziția elementului pe măsură ce se deplasează în jurul ferestrei browserului, creând o animație.

  • Valoarea de pornire - Starea animației de pornire folosită atunci când elementul intră în partea de jos a ferestrei browserului.
  • Valoare intermediară - Starea de animație intermediară care va fi transferată atunci când elementul se deplasează la mijlocul ferestrei.
  • Valoarea finală - Starea de animație finală care apare atunci când elementul părăsește fereastra browserului în partea de sus a ecranului.

De exemplu, un efect de opacitate cu o valoare inițială 0 (invizibil), o valoare mediană 100 (complet vizibil) și o valoare finală 0 (invizibil), se va schimba dintr-o stare invizibilă atunci când intră până când devine 100% vizibil în mijlocul ferestrei, apoi va dispărea într-o stare invizibilă la ieșirea din fereastră.

Reglarea cronologiei animației

Nu numai că puteți ajusta valorile animației, dar puteți și ajusta cronologia animației. Interfața de utilizare a cronologiei reprezintă înălțimea ferestrei browserului. Fiecare cadru cheie de animație poate fi declanșat într-o poziție diferită în fereastra de vizualizare. Acest lucru vă permite să controlați începutul, sfârșitul și sincronizarea animației în funcție de locația elementului animat în axa y a ferestrei browserului.

  • Poziția de pornire a cadrului cheie - Această opțiune controlează începutul animației. Dacă doriți să întârziați animația, trageți poziția cadrului cheie de pornire spre interior.
  • Poziția centrului cadrului cheie - Aceasta controlează punctul în care animația atinge valoarea sa centrală a animației. Nu trebuie să fie exact în mijlocul cronologiei animației. Puteți muta cadrul cheie din mijloc în orice poziție din fereastră.
  • Sfârșitul poziției cadrului cheie - Acest control este utilizat pentru a termina animația. Dacă doriți ca animația să se încheie înainte ca clipul să iasă din fereastra browserului, puteți trage poziția cadrului de încheiere spre interior.

Adăugați stări statice la orice animație

De asemenea, puteți adăuga pauze animațiilor dvs. mărind durata valorii statice a efectului mediu. Pentru a crea o durată de animație statică, faceți clic pe cele două săgeți atunci când treceți cu mouse-ul peste cadrul cheie din mijloc. Puteți extinde apoi cadrul cheie din mijloc trăgându-i marginile înainte și înapoi. În acest moment al animației, elementul va rămâne static. După încheierea duratei statice, animația va continua să treacă la valoarea finală.

Ce părere aveți despre aceste noi caracteristici? Nu ezitați să vă împărtășiți opiniile în comentarii.