Cum să proiectezi un ceas animat cu efectele de defilare ale lui Divi

Web-ul este plin de site-uri care au nevoie de accente de design legate de timp (optimizarea vitezei, evenimente viitoare etc.). În majoritatea cazurilor, o pictogramă de ceas sau un grafic poate funcționa excelent. Dar, crearea unui design de ceas animat va da cu siguranță o „rotație” unică designului site-ului dvs. web.

Cu toate opțiunile de design încorporate disponibile în Divi, putem crea un design minunat de ceas animat de la zero. În acest tutorial, vom crea un ceas animat care va întoarce acele ceasului în timp ce utilizatorul derulează pagina în jos.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Descărcați GRATUIT aspectul ceasului animat

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Partea 1: Proiectarea feței ceasului

Pentru a începe, adăugați un rând cu o coloană la secțiunea obișnuită.

Setări rând

Înainte de a adăuga module, deschideți setările rândului și actualizați următoarele:

• Culoare fundal: # 003a5c

Sub fila Proiectare, actualizați următoarele:

• Lățimea jgheabului: 1
• Lățime: 50vw
• Lățime maximă: 500 px
• Înălțime: 50vw
• Înălțime maximă: 500 px

• Colțuri rotunjite: 50%
• Lățimea chenarului: 15 px
• Culoare margine: #ffffff

• Box Shadow: vezi captura de ecran
• Box Shadow Vertical Position: 0px
• Puterea neclarității umbrei cutiei: 68 px
• Culoare umbră: rgba (0,0,0,0.22)

Sub fila Advanced, actualizați opțiunile de vizibilitate după cum urmează:

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Partea 2: Adăugarea markerelor orare

Odată ce rândul este conceput ca față de ceas, suntem pregătiți să adăugăm indicatorii de oră care reprezintă doisprezece ora 0, trei ora 0, șase ora 0 și nouă ora 0. Fiecare dintre markeri va fi creat folosind un modul divizor.

Markerul de la ora 12

Începeți prin adăugarea unui nou modul divizor în interiorul rândului.

Apoi actualizați culoarea de fundal după cum urmează:

• Culoare fundal: # 78acf4

• Lățime: 10vw
• Lățime maximă: 150 px
• Înălțime: 3 px
• Colțuri rotunjite: 8 px
• Transformare Rotire Axa Z: 90 grade

Sub fila avansată, dați divizorului o poziție absolută:

• Poziție: Absolută
• Locație: centru de sus

Marcatorul de 6 ore

Pentru a crea markerul de la ora 3, copiați divizorul folosit pentru a crea markerul de 12 0'clock. (În acest moment este o idee bună să etichetați modulele în modul Layers.) Apoi deschideți separatorul duplicat și actualizați locația poziției după cum urmează:

• Locație: centru jos

Markerul de la ora 3

Pentru a crea marcatorul de la ora 3, copiați marcajul de la ora 6. Apoi deschideți setările pentru noul duplicat (asigurați-vă că îl etichetați „ora 3”) și schimbați următoarele:

• Locație: centru dreapta

Apoi actualizați opțiunile de transformare după cum urmează:

Sub fila de traducere ...

• Transformă axa X tradusă: 50%

Sub fila Rotire

• Transformare Rotire Axa Z: 0deg

Markerul de la ora 9

Pentru a crea marcatorul de la ora 3, copiați marcajul de la ora 6. Apoi deschideți setările pentru noul duplicat (asigurați-vă că îl etichetați „ora 9”) și modificați următoarele:

• Locație: centru stânga

Apoi actualizați opțiunile de transformare după cum urmează:

Sub fila de traducere ...

• Transformă axa X tradusă: -50%

Partea 3: Crearea mâinilor ceasului (al doilea, minutul și ora)

Odată ce marcajele orelor sunt la locul lor, suntem pregătiți să începem să creăm ceasurile. Vom începe cu mâna a doua.

A doua mână

Pentru a crea mâna a doua, duplicați divizorul de la ora 12 și trageți-l sub restul separatoarelor din coloană folosind modalul Straturi.

Apoi etichetați noul duplicat „a doua”.

Deschideți setările modulului și actualizați poziția în fila Advanced:

• Localizare: centru centru

Sub fila Design, actualizați dimensiunea după cum urmează:

• Lățime: 20vw
• Lățime maximă: 200 px
• Înălțime: 0,5vw
• Înălțime maximă: 7,5 px

Acum mâna a doua se află în mijlocul feței ceasului, dar dorim ca partea de jos a mâinii a doua să înceapă în centru așa cum ar face o mână normală a ceasului. Apoi vrem ca partea de jos a mâinii să rămână în centru ca origine pivotantă, astfel încât mâna să poată roti așa cum ar fi la un ceas real. Pentru a face acest lucru, va trebui să folosim o combinație de opțiuni de transformare pentru a poziționa și roti divizorul dintr-o anumită origine de transformare.

Actualizați următoarele:

Sub fila de traducere ...

• Transformă axa X X: 0% (acesta este un pas important)

Sub fila Rotație ...

• Transformă rotire axa Z: -90 grade

Sub fila Origine ...

• Transformă Originea: Centrul Stânga

Deoarece această mână se va mișca foarte repede odată ce adăugăm efectul de derulare, să îi dăm o culoare de fundal semi-transparentă, astfel încât să nu fie prea distractivă.

• Culoare fundal: rgba (175.175.175,0.12)

Mâna Minutelor

Pentru a crea aripa de minute, copiați modulul de a doua și etichetați „minutul” duplicat. Apoi deschideți noul modul divizor și actualizați culoarea de fundal:

• Culoarea din stânga a gradientului de fundal: # 78acf4
• Culoarea dreaptă a gradientului de fundal: # b0b9ff
• Direcția gradientului: 90 grade

Apoi actualizați designul după cum urmează:

• Lățime: 15w
• Lățime maximă: 150 px
• Înălțime: 1vw
• Înălțime maximă: 15 px

Mâna orei

Odată ce aripa de minute este completă, copiați modulul mâna a doua și etichetați „ora” duplicat. Apoi deschideți noul modul divizor și actualizați culoarea de fundal după cum urmează:

• Culoare fundal: #ffffff

Apoi actualizați dimensiunea sub fila de proiectare după cum urmează:

• Lățime: 10vw
• Lățime maximă: 100 px

În acest moment, veți avea toate cele trei mâini ale ceasului pregătite pentru efectele de derulare!

Partea 4: Adăugarea efectelor de derulare a rotației la fiecare mână de ceas

Pentru a roti acele ceasurilor, vom adăuga efectul de rotație la fiecare dintre cele trei axe. Deoarece lucrăm cu un design al ceasului, este important să ne amintim că putem folosi gradele de rotație de pe fiecare mână a ceasului pentru a reprezenta timpul real. De exemplu, rotirea mâinii orelor cu 30 de grade ar reprezenta ora 1, 60 de grade ar fi ora 2 și așa mai departe.

Efect de derulare a rotirii mâinii orare

Mai întâi, vom adăuga un efect de derulare a rotației la mâna orelor. Deschideți setările separatorului orei și adăugați următorul efect de transformare:

Sub fila de rotație ...

• Activați rotirea: DA
• Rotație de pornire: 0 grade (la 10%)
• Rotație medie: 15 grade (la 50%)
• Rotație finală: 30 grade (la 90%)

Efect de derulare a rotirii mâinii de minute

Apoi, vom adăuga un efect de derulare a rotației la aripa minutelor. Deschideți setările separatorului de minute și adăugați următorul efect de transformare:

Sub fila de rotație ...

• Activați rotirea: DA
• Rotație de pornire: 0 grade (la 10%)
• Rotație medie: 180 grade (la 50%)
• Rotire finală: 360 grade (la 90%)

Efect de derulare a rotirii mâinii a doua

Apoi, vom adăuga un efect de derulare a rotației la mâna a doua. Deschideți setările divizorului second hand și adăugați următorul efect de transformare:

Sub fila de rotație ...

• Activați rotirea: DA
• Rotație de pornire: 0 grade (la 10%)
• Rotație medie: 5400 grade (la 50%)
• Rotație finală: 10800 grade (la 90%)

NOTĂ: O rotație precisă pentru ca mâna a doua să atingă 1 oră ar necesita o rotație de 21600 de grade. Dar, deoarece acest lucru este prea rapid, am considerat că este mai bine să reduc asta la jumătate. La urma urmei, acest lucru este în scopuri de proiectare.

Rezultate finale

Iată designul final.

Și acesta este rezultatul final al efectelor de derulare. Observați cum trece timpul exact o oră când derulați pagina în jos.

Gânduri finale

Este destul de uimitor că putem realiza un design de ceas de genul acesta cu efecte de derulare care reprezintă timpul atât de precis. Simțiți-vă liber să experimentați adăugând mai multe efecte de derulare a rotației pentru a accelera și a încetini timpul ceasului în timp ce derulați. În plus, puteți utiliza acest design de ceas pentru a accentua o mulțime de CTA-uri sau antete.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!