Cum se utilizează efecte de mișcare pentru a anima imaginile (rotire, scalare, derulare și transparență)

Publicat: 2019-05-06

În urma uriașului răspuns pozitiv pe care l-am primit după tutorialele noastre Motion Effects, am decis să le adunăm într-un singur articol care vă va ajuta să creați site-uri web mai interactive.

Vom acoperi:

Efecte de rotație, orizontală și scalare
Efect de transparență a imaginii
Rotiți și scalați imaginile
TRUC BONUS: Efect de suprapunere a textului animat

Deci, să începem ...

Animație imagine: Rotire, Derulare orizontală, Derulare verticală și Scală

În acest videoclip, veți afla cum să adăugați efecte de defilare la designurile dvs. Elementor care fac ca imaginile să arate ca și cum ar fi balansate, glisante, plutitoare sau înaintând pe măsură ce un vizitator derulează pagina.

1. Rotire imagine: realizarea imaginilor în leagăn

Pentru a face o imagine swing, faceți clic pe fila Advanced, deschideți secțiunea Motion Effects și activați Scrolling Effects .

Apoi, faceți clic pe opțiunea Rotire și alegeți ce direcție doriți să rotiți imaginea.

Pentru a face animația netedă, setați și glisorul Speed la 1 .

În cele din urmă, puteți lăsa Viewport setat la valorile implicite - 0% și 100%:

how-to-add-scrolling-effects-to-your-website

În cele din urmă, setați punctul de ancorare Y în partea de sus pentru a vă face imaginea să „se balanseze” din partea de sus.

2. Derulare orizontală a imaginii: Cum să faceți imagini să alunece

Pentru a face o imagine diapozitivă, activați Efecte de derulare așa cum ați făcut în secțiunea anterioară. Apoi, activați Derularea orizontală și:

Alegeți direcția în care doriți să alunece imaginea
Setați viteza la 10

how-to-add-scrolling-effects-to-your-website-2

Si asta e! Imaginea dvs. va aluneca pe măsură ce un vizitator parcurge pagina.

3. Derulare verticală a imaginii: Cum să faceți ca imaginile să plutească

Pentru a face o imagine să plutească, activați Efecte de derulare . Apoi, activați Derularea verticală și setați direcția egală cu Jos

how-to-add-scrolling-effects-to-your-website-3

Si asta e! Puteți lăsa celelalte setări ca implicite.

4. Scală imagine: Cum se creează un zoom imagine

Cu această ultimă, va arăta ca și cum imaginea se mișcă spre vizitator în timp ce vizitatorul derulează în jos. O altă modalitate de a gândi acest lucru este ca imaginea „scufundându-se”.

Pentru a începe, activați Efecte de derulare . Apoi, activați Derulare verticală și:

Setați direcția în jos
Setați vizualizarea între 0% și 40%

how-to-add-scrolling-effects-to-your-website-4

Apoi, faceți clic pe opțiunea Scară și setați Viteza egală cu 6 . De asemenea, utilizați setarea Viewport pentru a face ca 20% să fie în partea de jos și 80% în partea de sus .

Si asta e.

Acum, că știi cum să folosești efectele de derulare, experimentează cu propriile modele pentru a crea ceva minunat!

Transparența imaginii: faceți ca imaginile și fundalurile să dispară pe derulare

În acest videoclip, veți afla cum să utilizați setările Viewport pentru a crea efecte de mișcare interesante pe măsură ce vizitatorii navighează pe site-ul dvs. Puteți aplica efecte de mișcare atât pe fundaluri, cât și pe secțiuni, precum și pe widget-uri individuale, ceea ce vă oferă multă flexibilitate pentru tipurile de efecte pe care le creați. Pentru a incepe:

Selectați o imagine
Accesați fila Advanced
Găsiți secțiunea Efecte de mișcare
Activați Efectele de derulare

Apoi, activați Derularea orizontală pentru a vă face imaginea să se deplaseze de la stânga la dreapta în timp ce utilizatorii derulează pagina în jos. De asemenea, puteți regla setarea Viteză pentru a face mișcarea mai rapidă sau mai lentă:

how-to-use-motion-effects-viewport-settings-1

Apoi, să săpăm în opțiunea Viewport și să vedem cum funcționează.

În primul rând, este important să definiți termenul - vizualizarea vizitatorului este dimensiunea vizibilă a ecranului dispozitivului unui utilizator .

Opțiunile Viewport vă permit să alegeți când să începeți și să opriți efectul de defilare ales pe baza vizualizării vizitatorului:

De exemplu, dacă setați partea de jos a ferestrei la 0% și partea de sus la 100%, imaginea va începe să se miște imediat ce va deveni vizibilă în partea de jos a ferestrei vizitatorului. Mai mult, imaginea va atinge poziția „originală” atunci când se află în mijlocul vizualizării vizitatorului ( sau, 50% ) și va continua să se deplaseze până când va ajunge în partea de sus (100%).

Iată deci întregul efect în detaliu:

Imaginea va începe în stânga poziției inițiale atunci când va apărea prima dată în fereastra vizitatorului (fereastra vizitatorului la 0% )
Va atinge poziția inițială la mijlocul ecranului vizitatorului (vizualizarea vizitatorului la 50% )
Va continua să alunece spre dreapta poziției sale inițiale pe măsură ce vizitatorul continuă să deruleze ( până când ajunge la 100%)

how-to-use-motion-effects-viewport-settings-2

Pe de altă parte, dacă setați partea de jos a ecranului la 50% și partea de sus la 100%:

Imaginea va începe din poziția inițială.
Odată ce imaginea se află în mijlocul ecranului vizitatorului (50%), va începe să se deplaseze spre dreapta până când imaginea ajunge în partea de sus a vizualizării vizitatorului (100%).

Să ne uităm la un alt tip de efect de derulare pentru a conduce acasă cum funcționează Viewport ...

Exemplu de efect de transparență

Pentru acest exemplu, activați opțiunea Transparență și:

Setați direcția la Fade In
Setați nivelul la 10 ( acest lucru face ca imaginea să fie foarte transparentă pentru a începe )

Dacă setați fereastra de jos la 0% și cea de sus la 100%, imaginea va fi transparentă atunci când apare prima dată în partea de jos a ferestrei de vizitare a vizitatorului (0%). Pe măsură ce imaginea se deplasează în sus, va deveni mai puțin transparentă, ajungând în cele din urmă la aspectul inițial când ajunge în partea de sus a ferestrei vizitatorului (100%). Dacă ai vrea să inversezi asta, ai putea alege Fade Out . Apoi, imaginea va apărea normală la început și va crește transparența pe măsură ce un vizitator derulează în jos. În cele din urmă, o altă opțiune este Fade Out In . Cu aceasta, imaginea va dispărea pentru a porni și apoi pentru a reveni în timp ce vizitatorul continuă să deruleze. Dacă setați fereastra de jos la 40% și partea de sus la 60% cu Fade Out In , atunci:

Imaginea va dispărea de la 0% la 40%
Va rămâne decolorat între 40% și 60%
Odată ce atinge 60%, va începe să se estompeze din nou între 60% și 100%

how-to-use-motion-effects-viewport-settings-3

Acum, că știți cum funcționează setarea Viewport , puteți juca cu diferite setări pentru a găsi efectul care vă place.

Utilizați punctele de ancorare X și Y în rotirea și scalarea efectelor

În acest videoclip, veți afla despre punctele de ancorare X și Y pentru efectele Rotire și Scalare din Efectele de mișcare ale Elementor.

Până la final, veți ști cum să aplicați aceste setări pentru a crea unele efecte de mișcare interesante pe site-ul dvs.

Pentru a începe, selectați imaginea la care doriți să adăugați efecte și:

Accesați fila Advanced
Găsiți setările Efecte mișcare
Activați Efectele de derulare

Puncte de ancorare în efectul de rotire

Să începem cu efectul Rotire. Faceți clic pe pictograma creion de efectul Rotire pentru ao activa - puteți lăsa setările ca implicite. Apoi, căutați setările X Anchor Point și Y Anchor Point care apar mai jos. Punctele de ancorare X și Y determină axa în jurul căreia se rotește o imagine. În mod implicit, ambele sunt setate la Centru , ceea ce înseamnă că imaginea se va roti ca și cum ar fi un „pin” în centrul imaginii. Cu toate acestea, schimbarea punctului de ancorare X și / sau Y va provoca efecte de rotație diferite. De exemplu, dacă setați punctul de ancorare X în stânga și punctul de ancorare Y în partea de sus, imaginea se va roti în colțul din stânga sus astfel:

Sau, dacă setați punctul de ancorare X în centru și punctul de ancorare Y în partea de sus, imaginea se va roti ca și cum ar fi o pictură pe care ați agățat-o în partea de sus. Ai idee? Să ne uităm la încă unul. Dacă schimbați punctul de ancorare X spre dreapta, acum imaginea va începe să se rotească ca și cum ar fi fixată în colțul din dreapta sus. Să rezumăm asta. Punctul de ancorare X determină poziția pe axa x în jurul căreia se rotește imaginea:

Iar punctul de ancorare Y face același lucru pentru orientarea verticală:

Puncte de ancorare în efectul Scară

Acum, că înțelegeți conceptul de bază, să vedem cum funcționează aceeași idee cu efectul Scală .

Pentru a începe, dezactivați efectul Rotire, activați efectul Scară și:

Setați direcția să crească
Setați Viteza la -5

În mod implicit, atât Punctul de ancorare X , cât și Punctul de ancorare Y sunt setate la Centru , ceea ce înseamnă că imaginea se reduce în centrul widgetului de imagine.

Pe de altă parte, dacă setați punctele de ancorare la stânga și sus , imaginea se va reduce în colțul din stânga sus.

Este exact aceeași idee ca efectul de rotire.

Acum, că știți cum funcționează punctele de ancorare X și Y, continuați și jucați-vă cu aceste setări pentru a crea efectul exact pe care îl doriți.

TRUC BONUS: Efect de suprapunere a textului animat

În acest videoclip, veți afla cum să utilizați funcția de derulare orizontală în Elementor Motion Effects pentru a crea un efect de text animat îngrijit pe site-ul dvs.

Veți putea să mutați text pe pagină pe măsură ce vizitatorii parcurg. Și cu unele modificări, puteți chiar să schimbați culoarea textului pe măsură ce se mișcă.

Pentru acest exemplu, vom prezenta cum să creați mai multe titluri animate:

Un simplu titlu gri care se deplasează spre dreapta și rămâne aceeași culoare
O rubrică albă și roz care se deplasează spre stânga și se schimbă de la alb la roz odată ce traversează fundalul roz

Crearea primului antet - Just Motion

Să începem cu titlul gri solid.

Selectați titlul, apoi:

Accesați fila Advanced
Găsiți secțiunea Efecte de mișcare
Activați Efectele de derulare

Apoi, faceți clic pe creionul de lângă efectul de derulare orizontală pentru a introduce setările sale:

Schimbați direcția în direcția pe care doriți să o deruleze textul („spre dreapta” pentru exemplul nostru)
Lăsați setările Viteză și Vizualizare ca implicite

Si asta e! Antetul dvs. va aluneca spre dreapta pe măsură ce un vizitator derulează pagina în jos.

Crearea celui de-al doilea antet - Modificare mișcare și culoare

Acum, să devenim un pic mai avansați și să avem titlul să schimbe culoarea pe măsură ce se mișcă. Acest proces implică:

Crearea secțiunilor interioare duplicate
Utilizarea opțiunii Overflow: Ascuns pentru a ascunde titlul de la una dintre secțiuni odată ce trece în afara secțiunii interioare

Pentru a începe, adăugați un nou widget Secțiune interioară la secțiunea în care doriți să plasați antetul și apoi ștergeți coloana din stânga. Apoi, setați înălțimea minimă la 450 px:

Apoi, accesați fila Stil și setați culoarea de fundal la roz. În cele din urmă, accesați fila Advanced și setați umplutura din stânga la 33%. Apoi, adăugați widget-ul Heading și stilizați-l pe placul dvs. Ar trebui să aveți titlul în secțiunea interioară astfel:

Acum, editați widget-ul Heading și activați Scrolling Effects în fila Advanced . Apoi, activați setarea Defilare orizontală și lăsați opțiunile ca implicite.

Acum, antetul dvs. se va deplasa spre stânga, dar nu va schimba încă culorile. Puteți vedea că este încă alb chiar și pe fundalul alb.

Să remediem asta ...

Apoi, copiați secțiunea interioară. Acum, veți avea două secțiuni interioare și titluri identice. Puteți utiliza Navigatorul pentru a redenumi secțiunile pentru a vă ajuta să vă amintiți care este:

Acum, mergeți la secțiunea interioară de jos ( cea duplicată ) și schimbați culoarea de fundal în alb. De asemenea, veți dori să schimbați culoarea titlului la aceeași culoare cu fundalul din secțiunea interioară originală. Apoi, adăugați o marjă superioară negativă de 450 px în secțiunea interioară inferioară. Acum, secțiunea interioară de jos ( duplicat ) ar trebui să apară „deasupra” secțiunii interioare originale. Pentru a remedia acest lucru, setați indexul Z pentru secțiunea duplicat la 1 și setați indexul Z pentru secțiunea originală la 2 . Apoi, trebuie să vă asigurați că numai antetul roz apare atunci când se deplasează în afara lățimii secțiunii interioare. Puteți vedea mai jos un exemplu de ceea ce dorim:

Pentru a obține acest efect, accesați setările pentru secțiunea interioară originală . În fila Aspect , găsiți opțiunea Overflow și setați-o la Ascuns .

Si asta e! Acum, doar titlul din secțiunea duplicat va apărea odată ce derulează pe lângă secțiunea interioară, ceea ce creează efectul textului care schimbă culoarea.