Efecte de Mișcare în Elementor

Notă! Unele linkuri de pe această pagină pot fi linkuri afiliate, ceea ce înseamnă că, dacă alegeți să efectuați o achiziție, pot câștiga un mic comision fără costuri suplimentare pentru dvs. Apreciez foarte mult sprijinul dvs.!

Loading

Efecte de Mișcare în Elementor

Efecte de mișcare în Elementor, sunt un set puternic de comenzi pentru adăugarea de tranziții și animații designului dvs.

Până acum, designerii web care doreau să încorporeze animații și efecte de mișcare trebuiau să folosească fie biblioteci externe, fie cod personalizat.

Dar din versiunea Elementor Pro 2.5 oferă o soluție all-in-one pentru crearea de paralax, animații și alte efecte de mișcare – toate integrate perfect în editorul Elementor.

Efecte de Defilare

Utilizați Efecte de defilare pentru a crea animații și interacțiuni uimitoare atunci când utilizatorul defilează prin pagină. Iată o listă a efectelor de defilare:

Defilare Verticală

Defilare Verticală
Defilare Verticală

Acesta este efectul clasic de paralax. Derularea verticală face ca elementul să se miște cu o viteză diferită de cea a paginii în timpul derulării, în direcția și viteza pe care o alegeți.

Defilare Orizontală

Defilare Orizontală
Defilare Orizontală

Derularea orizontală înseamnă că atunci când vizitatorul derulează în sus și în jos, elementul se mișcă la dreapta și la stânga în consecință. Un exemplu de utilizare – o secțiune cu nori care se deplasează spre dreapta când vizitatorul derulează în jos.

Transparenţă

Transparenţă
Transparenţă

Transparența vă permite să faceți treptat elementele mai transparente sau mai vizibile în corelație cu scroll-ul vizitatorului. Un exemplu este ca un titlu să apară și apoi să se dizolve în conformitate cu scroll-ul dvs..

Există 4 direcții posibile de efect:

  1. Fade in – Ceea ce înseamnă că elementul începe ca transparent și treptat devine vizibil.
  2. Fade out – Elementul începe vizibil și devine treptat transparent.
  3. Fade out in – Elementul începe ca vizibil, apoi dispare, apoi devine din nou vizibil.
  4. Fade in out – Elementul începe ca transparent, apoi devine vizibil, apoi transparent din nou.

Blur

Blur
Blur

Această setare este similară cu Transparența, doar că în loc de transparență, elementul devine neclar. Un bun exemplu sunt imaginile de fundal, care obțin o focalizare adecvată numai atunci când utilizatorul derulează în jos.

Rotație

Aici, elementul se rotește pe măsură ce derulați. Un exemplu atractiv este văzut în rotația stelelor din imaginea de mai jos:

Rotație
Rotație
Notă:
Cele două setări, punctele de ancorare X și Y, determină axa în jurul căreia elementul se scalează sau se rotește. Dacă setați orientarea din stânga sus, rotația se va întâmpla în jurul punctului din stânga sus al elementului. Dacă setați orientarea centru-centru, rotația se va roti în jurul centrului său, ca o roată. Această setare este relevantă numai pentru efectul „Rotire” de mai sus, precum și pentru efectul „Scalare” enumerat mai jos.

Scale

Scale
Scale

Scala vă permite să creșteți și să micșorați elementele în funcție de defilare. Exemplu: un fundal care crește în timpul derulării.

Notă:
Folosiți „Aplicați efecte pe” pentru a determina dacă efectele de mișcare sunt aplicate pe mobil, desktop sau tabletă. Efectele mouse-ului vor afecta numai dispozitivele desktop.

Efecte Mouse

Urmărirea Mouse-ului

Creați un sentiment de profunzime făcând elementele să se miște în raport cu mișcarea mouse-ului vizitatorului.

Urmărirea Mouse-ului
Urmărirea Mouse-ului

Înclinare 3D

În mod similar modului în care Mouse Track mută elementul în raport cu mișcarea mouse-ului, efectul de înclinare 3D înclină elementul în funcție de aceeași mișcare a cursorului.

Înclinare 3D
Înclinare 3D

Efecte de Mișcare – Browsere Compatibile

Chrome

Firefox

Safari

Opera

Edge

Internet Explorer

Suportat

Suportat

Suportat

Suportat

Suportat*

Nu este Suportat

* Comportament ușor întârziat

Nota 1:
Elementor respectă preferința „proprietate de mișcare redusă” pe care o poate seta un utilizator. Dacă un utilizator a setat oricare dintre următoarele, atunci efectele de mișcare vor fi dezactivate pentru acel utilizator:
Mac: „Preferințe de sistem > Accesibilitate > Afișare” și bifați/debifați caseta pentru „Reduceți mișcarea
iOS: „Setări > General > Accesibilitate” și activați/dezactivațiReduceți mișcarea
Windows 10: „Setări > Acces ușor > Afișare > Simplificați și personalizați Windows
Nota 2:
În Safari, dacă nu vedeți efectele mouse-ului sau vă confruntați cu problema dispariției elementelor în Safari, acest lucru se datorează unei versiuni jQuery vechi utilizate de WordPress. În unele cazuri, vizualizarea efectelor Mouse Track prin Safari poate provoca o eroare jQuery care va face ca elementele să dispară, cum ar fi lipsa săgeților pentru carusele, de exemplu. Dacă se întâmplă acest lucru, este posibil să vedeți și o eroare care face referire la „dimensiunea maximă a stivei de apeluri depășită”. Pentru a rezolva problema, fie eliminați animațiile de intrare din widget-uri cu efecte de mișcare și/sau eliminați efectele mouse-ului din zonele care au atât efectele de defilare, cât și efectele mouse-ului activate simultan.

Pentru confortul dvs. urmăriți acest tutorial și în format Video. Video creat de echipa de asistență Elementor.

Notă! Ați găsit util acest articol? Atunci veți aprecia sprijinul oferit de Elementor în realizarea acestui tutorial. Experimentați construcția unui site cu Elementor astăzi și obțineți un site web modern, pre-securizat, pre-optimizat. Alegeți licența care vi se potrivește astăzi, treceți la versiunea Pro.

Documentație adițională

S-ar putea să te intereseze și:

Despre Admin Staff

Comunitatea WordPress este un Blog strict Educativ pentru utilizatorii de WordPress. Nu este Agenție de WEB, Publicitate sau Marketing! Dacă sunteți firmă și aveți nevoie de sfaturi vă ajut cu plăcere, pentru contracte de colaborare, vă rog contactați agenții specializate, care vă pot oferi documentația fiscală necesară. Sunt pasionat de WordPress și tot ce se leagă de mediul online din 2011, scriu din pasiune și-mi place să ajut, doar prin prisma acestui fapt că-mi place să fac bine oamenilor care au aceeași pasiune. Blog-ul este monetizat prin link-uri de afiliere și Google Adsense, unde se plătesc taxe legale de către platformele respective. Dacă dorești să susții acest blog, sunt deschis pentru donații. Vă mulțumesc pentru înțelegere! George CRIȘAN , Administrator Comunitatea WordPress!

Lasă un comentariu