Cum să combinați animații și paralax în Divi pentru modele unice
Publicat: 2019-08-07Fie că pregătim o masă sau proiectăm un site web, ingredientele singure nu vor garanta un fel de mâncare gustoasă sau un site frumos. Cât de bine combinăm aceste elemente împreună face diferența. În acest tutorial, vă voi arăta cum să combinați animația și paralaxa imaginii într-un mod pe care probabil nu l-ați luat în considerare până acum. Dacă nu știți deja, animația este o caracteristică Divi încorporată care poate fi adăugată la orice element Divi la încărcarea paginii. Parallax este, de asemenea, o opțiune Divi care vă permite să adăugați mișcare unică imaginilor de fundal pe scroll.
Astăzi, vom folosi setările de proiectare încorporate ale Divi pentru a combina animațiile și paralaxa în tot felul de moduri creative. Combinația funcționează împreună destul de magic pentru a crea un aspect frumos de imagini de paralaxă animate care arată minunat pe măsură ce derulați pagina.
Să începem!
Trage cu ochiul
Descărcați aspectul GRATUIT
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.
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.
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 în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.
Să trecem la tutorial, nu-i așa?
Ce trebuie să începeți
Pentru a începe, va trebui să aveți următoarele:
- Tema Divi instalată și activă
- O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)
- Imagini care urmează să fie utilizate pentru conținut fals. Puteți găsi imaginile folosite pentru acest tutorial în Life Coach Divi Layout Pack.
După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.
Ideea de bază
Ideea de bază din spatele acestui concept de design se concentrează pe utilizarea paralelei CSS pe imaginile de fundal. Datorită modului în care funcționează paralaxa CSS, imaginea de paralaxă va rămâne fixă și va umple automat fereastra browserului indiferent de dimensiunea elementului care o folosește. Natura fixă a imaginii vă permite să utilizați aceeași imagine de paralaxă pe mai multe elemente din Divi și apoi să mutați acele elemente folosind animația. Când animația se instalează, imaginile de fundal de paralaxă utilizate se vor potrivi și vor funcționa așa cum era de așteptat atunci când derulați pagina în jos.
Partea 1: Crearea animației Divi și proiectarea Parallax (versiunea 1)
Creați o nouă secțiune cu un rând cu două coloane (1/2 1/2).
Înainte de a adăuga modulele noastre, să facem câteva ajustări la secțiune și rând.
Actualizați setările secțiunii și rândurilor
Mai întâi, deschideți setările secțiunii și eliminați umplutura implicită după cum urmează:
Căptușeală: 0 px sus, 0 px jos
Apoi deschideți setările rândului și dați rândului o imagine de fundal de paralaxă.
Imagine de fundal: [încărcați imaginea]
Utilizați Efect Parallax: DA
Metoda Parallax: CSS
Aici metoda paralaxă trebuie setată la CSS pentru ca proiectarea să funcționeze.
Lățime: 100%
Lățime maximă: 100%
Căptușeală: 10vw sus, 10vw stânga, 10vw dreapta
Adăugați modulul de text cu fundalul paralelelor potrivite
Acum suntem gata să începem să adăugăm modulele noastre de text la proiectare. Primul modul de text este cheia acestui design. Aplicând exact aceeași imagine de fundal și paralela CSS la modulul text, putem deveni creativi cu animația pentru un efect complet unic.
Continuați și adăugați un nou modul de text în coloana 1.
Apoi actualizați setările modulului text după cum urmează:
Conținutul corpului:
<p>Hi!<br>I'm Jane...</p> <a href="#">about me</a>
Apoi, dați modulului text aceeași imagine de fundal de paralaxă CSS pe care ați adăugat-o la rând.
Imagine de fundal: [încărcați imaginea]
Utilizați Efect Parallax: DA
Metoda Parallax: CSS
Font text: Fira Sans
Greutatea fontului textului: ușoară
Culoarea textului textului: #ffffff
Dimensiune text text: 70 px
Înălțimea liniei de text: 1em
Stilul fontului de legătură: Subliniat (U)
Culoarea textului linkului: #ffffff (implicit), # 881e67 (trecere)
Dimensiune text link: 30 px
Spațiere scrisoare link: 2 px
Căptușeală: 20% sus, 20% jos, 10% stânga, 10% dreapta
Lățimea chenarului: 20 px
Culoare margine: #ffffff
Apoi adăugați următoarea animație la modulul text:
Stil de animație: Slide
Direcția animației: Corect
Durata animației: 1500 ms
Intensitate animație: 80%
Animație Opacitate de pornire: 20%
Să verificăm efectul de până acum ...
Observați cum imaginea de fundal a modulului de text animat se bazează pe locația potrivită a fundalului rândului. Acest lucru se datorează faptului că ambii partajează aceeași imagine de fundal cu efectul de paralaxă CSS.
Adăugarea celui de-al doilea modul de text cu o imagine de fundal True Parallax
În acest moment suntem gata să adăugăm următorul nostru modul de text. Următoarea va avea o imagine de fundal diferită folosind adevăratul efect de paralaxă. Îi vom oferi și niște animație.
Adăugați un nou modul de text în coloana 2.
Apoi actualizați conținutul corpului cu cuvântul „blogul meu”.
Apoi adăugați o imagine de fundal cu metoda de paralaxă adevărată.
Imagine de fundal: [încărcați imaginea]
Utilizați Efect Parallax: DA
Metoda Parallax: Parallax adevărat
Font text: Fira Mono
Stil de text text: TT
Alinierea textului textului: centru
Culoarea textului textului: #ffffff
Spațiere scrisoare text: 10 px
Lățime: 320 px
Lățime maximă: 320 px
Alinierea modulului: centru
Marja: (desktop): -5vw sus, 4vw jos
Marjă (tabletă și telefon): 3vw top
Căptușeală: 70 px sus, 70 px jos
Lățimea chenarului: 20 px
Culoare margine: #ffffff
Stil de animație: Slide
Direcția animației: în jos
Întârziere animație: 200 ms
Crearea celui de-al treilea modul de text cu o nouă imagine de fundal Parallax
Pentru a crea al treilea modul de text, copiați modulul de text pe care tocmai l-ați creat în coloana 2.
Apoi, vom păstra imaginea de fundal la fel, dar vom actualiza efectul de paralaxă cu metoda de paralaxă CSS.
Lățime: 240 px
Lățime maximă: 240 px
Alinierea modulului: stânga
Marja: 0 px de jos
Căptușeală: 170 px sus, 170 px jos, 95 px stânga, 95 px dreapta
Lățimea personalizată și căptușeala dreaptă și stângă sunt folosite pentru a crea afișajul vertical al textului, care se potrivește cu designul modulului mai lung.
Apoi actualizați direcția animației în sus în loc de jos.
Direcția de animație: UP
Rezultat final
Acum, să verificăm rezultatul final.
Partea 2: Crearea animației și a proiectării Parallax (versiunea 2)
Acest proiect următor va adăuga o animație unică prin încărcarea imaginii de fundal de paralaxă pentru rând după animarea inițială a modulelor. Pentru a face acest lucru, va trebui să folosim un rând separat strict pentru imaginea de fundal de paralaxă CSS care se va deplasa în spatele conținutului. Și din moment ce vom avea fundalul secțiunii expuse inițial, putem adăuga o culoare de fundal personalizată pentru conținutul nostru înainte de animația rândului.
Iată cum să o faci.
Mai întâi, implementați modul de vizualizare wireframe. Apoi copiați rândul care conține modulele dvs. text. Acum veți avea două rânduri identice. Apoi, ștergeți modulele de text din rândul de sus. Tot ce ne-am dorit cu adevărat să facem era să începem cu proiectul rândului nostru de sus.
Apoi, actualizați setările pentru rândul superior, după cum urmează:
Înălțime: 900 px (desktop), 2000 px (tabletă și telefon)
Căptușeală: 0 px sus, 0 px jos
Stil de animație: Slide
Direcția animației: Corect
Durata animației: 1250 ms
Întârziere animație: 1800 ms
Oferim rândului o înălțime stabilită, deoarece rândul gol nu va avea nicio înălțime în mod implicit. Deci, trebuie să vă asigurați că înălțimea rândului este suficientă pentru a acoperi conținutul celui de-al doilea rând cu conținutul. De asemenea, am oferit rândului o animație cu o întârziere, astfel încât să alunece în spatele conținutului după apariția modulelor de text.
Suprapunerea celor două rânduri
Acum tot ce trebuie să facem este să aducem rândul inferior în sus, folosind marja negativă, astfel încât să se suprapună rândul superior cu animația noastră de fundal.
Deschideți setările pentru rândul de jos și actualizați marja după cum urmează:
Marja: -900px top (desktop), -2000px (tabletă și telefon)
Apoi scoateți imaginea de fundal cu metoda de paralaxă CSS pentru rând, deoarece vom folosi în schimb imaginea de fundal a rândului de sus.
Iată designul de până acum. Observați animația de fundal întârziată în primul rând și modul în care fundalul de paralaxă pentru modulul de text din coloana 1 se potrivește perfect cu acesta.
Adăugarea unei culori de fundal a secțiunii
Pentru a da modulelor de text o culoare de fundal inițială înainte de animația rândului, puteți da o culoare de fundal secțiunii.
Deschideți setările secțiunii și adăugați următoarele:
Culoarea stânga a gradientului de fundal: rgba (136,30,103,0,61)
Culoarea dreaptă a gradientului de fundal: # 881e67
Tipul gradientului: radial
Rezultat final
Acum, să verificăm rezultatul final.
Combo opțional Blend Mode și Animation
De asemenea, puteți deveni și mai creativ adăugând un mod de amestecare la al doilea rând și adăugând o animație cu zoom care va funcționa în tandem cu animațiile modulului.
Blend Mode: Luminozitate
Stil de animație: Zoom
Iată rezultatul final.
Iată cum arată pe mobil.
Gânduri finale
Sper că ați învățat câteva lucruri pe parcurs pe măsură ce am explorat câteva modalități unice de a combina imagini de animație și de paralaxă. Rezultatele sunt cu siguranță unice și sunt sigur că puteți modifica cu ușurință această configurație pentru a construi nenumărate alte combinații care vor arăta uimitoare la următorul dvs. proiect.
Aștept cu nerăbdare să aud de la dvs. în comentarii.
Noroc!