Treci la conținutul principal

Descoperiți noile efecte de animație defilare pe Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Astăzi am fost informați cu privire la o nouă actualizare a Divi care oferă ceea ce se numește efecte de animație scrolling. Ne-am uitat la el și în acest tutorial vom rezuma la ce să ne așteptăm.

Să începem.

Care sunt efectele de defilare?

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

Pare complicat, dar cu Divi este destul de simplificat

Orice element poate fi animat folosind o combinație de scale, rotație, mișcare orizontală și verticală, opacitate și efecte de estompare. Controlați magnitudinea fiecărui efect în diferite puncte ale animației, apoi Divi se ocupă de restul, creând tranziții frumoase pe măsură ce acele elemente intră și se deplasează în jurul vederii vizitatorului. Creați animații simple care adaugă adâncime și rafinament subtil sau combinați efecte și animați mai multe elemente pentru a crea explozii spectaculoase de activitate care vă vor uimi vizitatorii!

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.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

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.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

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 regla valorile animației, dar puteți regla și cronologia animației. UI cronologie reprezintă înălțimea ferestrei browserului. Fiecare cadru cheie de animație poate fi declanșat într-o poziție diferită în fereastră. Acest lucru vă permite să controlați începutul, sfârșitul și temporizarea animației animației pe baza locației clipului animat în axa y a ferestrei browserului.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

  • 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.

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
5 acțiuni
acțiune5
tweet
Registru