Cum să reporniți o animație de fiecare dată când derulați un element cu Divi și GSAP

Publicat: 2021-06-28

Când vine vorba de animarea elementelor de pe pagina dvs., cel mai probabil veți dori să activați animația unui element odată ce acesta intră în fereastra de vizualizare. Cu setările de animație încorporate ale lui Divi, imediat ce elementul respectiv a fost vizualizat și a fost animat, acesta va rămâne static până când reîncărcați întreaga pagină. În unele cazuri, ați putea căuta o abordare mai consecventă, în care animația dvs. repornește cu fiecare intrare în fereastra de vizualizare. Acest lucru vă va ajuta să eficientizați experiența pe care vizitatorii o au pe site-ul dvs. web. În acest tutorial, vă vom arăta exact cum să faceți acest lucru folosind Divi, GSAP și ScrollTrigger pentru GSAP. Odată ce veți obține abordarea, veți putea să o aplicați oricărui element de pe pagina dvs. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

reporniți animația

Mobil

reporniți animația

Descărcați aspectul GRATUIT

Pentru a pune mâna pe aspectul liber, 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

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!

1. Creați proiectarea secțiunii

Adăugați secțiunea Substituent

Înainte de a începe crearea designului, vom adăuga două secțiuni de substituent pe pagina la care lucrăm. În acest fel, putem vedea experiența de derulare după finalizarea designului. Alternativ, puteți utiliza designul într-o pagină pe care ați configurat-o deja. Adăugați o nouă secțiune obișnuită.

reporniți animația

Dimensionare

Modificați înălțimea secțiunii după cum urmează:

  • Înălțime: 100vh

reporniți animația

Secțiunea Clone Placeholder

Apoi, clonați secțiunea o dată.

reporniți animația

Adăugați o secțiune nouă între secțiunile substituente

Pentru a crea designul pe care l-ați putut vedea în previzualizarea acestui post, vom adăuga o nouă secțiune obișnuită între secțiunile de substituent.

reporniți animația

reporniți animația

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

reporniți animația

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor, accesați fila de proiectare și modificați setările de dimensionare după cum urmează:

  • Utilizați lățimea personalizată a jgheabului: da
  • Lățimea jgheabului: 2
  • Lățime: 90%
  • Lățime maximă: 2080 px

reporniți animația

Adăugați modulul de text nr. 1 în coloană

Adauga continut

Apoi, adăugați un prim modul de text în coloană și includeți un conținut la alegere.

reporniți animația

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

  • Font text: Montserrat
  • Greutate font text: greu
  • Stil de text text: majuscule
  • Culoarea textului: # f9f9f9
  • Mărimea textului:
    • Desktop: 150 px
    • Tabletă și telefon: 11vw
  • Înălțimea liniei textului: 1.1em
  • Aliniere text: centru

reporniți animația

Adăugați modulul de text nr. 2 în coloană

Adăugați conținut H2

Adăugați un alt modul de text sub cel anterior și includeți conținut H2.

reporniți animația

Setări text H2

Stilizați textul H2 după cum urmează:

  • Rubrica 2 Font: Montserrat
  • Titlul 2 Aliniere text: centru
  • Rubrica 2 Dimensiune text:
    • Desktop: 80 px
    • Tabletă și telefon: 10vw

reporniți animația

Dimensionare

Adăugați și o lățime de 100%.

  • Lățime: 100%

reporniți animația

Poziţie

Și repoziționați întregul modul în fila avansată.

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

reporniți animația

Adăugați rândul # 2

Structura coloanei

Adăugați un alt rând sub cel anterior, utilizând următoarea structură de coloane:

reporniți animația

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și reglați setările de dimensionare după cum urmează:

  • Utilizați lățimea personalizată a jgheabului: da
  • Lățimea jgheabului: 2
  • Lățime: 90%
  • Lățime maximă: 2080 px

reporniți animația

Setări coloana 1

Apoi, deschideți setările coloanei 1.

reporniți animația

Imagine de fundal

Încărcați o imagine de fundal la alegere.

  • Dimensiunea imaginii de fundal: copertă
  • Poziția imaginii de fundal: Centru

reporniți animația

Spațiere

Modificați apoi setările de spațiere a coloanei.

  • Căptușeală superioară: 100 px
  • Căptușeală inferioară:
    • Desktop: 400 px
    • Tabletă și telefon: 200 px
  • Căptușeală stângă: 5,5%
  • Căptușeală dreaptă: 5,5%

reporniți animația

Adăugați modulul de text nr. 1 în coloana 1

Adăugați conținut H4

Apoi, adăugați un modul de text în coloana 1 cu un conținut H4.

reporniți animația

Setări text H4

Stilizați textul H4 în consecință:

  • Rubrica 4 Font: Lato
  • Titlul 4 Greutate font: greu
  • Titlul 4 Stil font: majuscule
  • Titlul 4 Dimensiune text: 13 px
  • Rubrica 4 Spațierea literelor: 2 px

reporniți animația

Adăugați modulul de text nr. 2 în coloana 1

Adăugați conținut H3

Adăugați un alt modul de text sub cel anterior, folosind un conținut H3.

reporniți animația

Setări text H3

Modificați setările textului H3 în consecință:

  • Rubrica 3 Font: Montserrat
  • Rubrica 3 Dimensiune text: 36 px
  • Rubrica 3 Spațierea literelor: 1 px
  • Rubrica 3 Înălțimea liniei: 1.2em

reporniți animația

Adăugați modulul de text nr. 3 în coloana 1

Adăugați conținut de descriere

Adăugați ultimul modul de text care conține o descriere a conținutului la alegere.

reporniți animația

Setări text

Modificați setările de text ale modulului după cum urmează:

  • Font text: Lato
  • Culoarea textului: # 4c4c4c
  • Spațiere scrisoare text: 0,5 px
  • Înălțimea liniei de text: 2em

reporniți animația

Adăugați modulul buton la coloana 1

Adăugați o copie

Ultimul modul de care avem nevoie în această coloană este un modul buton. Adăugați o copie la alegere.

reporniți animația

Setări buton

Stilizați butonul din fila de proiectare.

  • Utilizați stiluri personalizate pentru buton: Da
  • Dimensiune text buton: 14 px
  • Culoarea textului butonului: #ffffff
  • Culoarea fundalului butonului: # 000000
  • Lățimea chenarului butonului: 0 px

reporniți animația

  • Buton Font: Lato
  • Buton Font Greutate: Bold
  • Stilul fontului butonului: majuscule

reporniți animația

Reutilizați coloana 1

Ștergeți coloanele 2 și 3

După ce ați completat coloana 1 și toate modulele din interior, puteți șterge cele două coloane rămase ale rândului.

reporniți animația

Clonați coloana 1 de două ori

Și refolosiți coloana 1 clonând-o de două ori.

reporniți animația

Schimbați imaginile de fundal ale coloanei duplicate

Asigurați-vă că modificați imaginea de fundal a fiecărei coloane duplicat.

reporniți animația

Schimbați conținutul în coloane duplicate

Împreună cu conținutul modulului.

reporniți animația

Adăugați Transformare Traducere în coloana 2 Setări

Apoi, deschideți setările coloanei 2 și accesați fila de proiectare. Odată ajuns acolo, adăugați câteva valori de traducere de transformare pe diferite dimensiuni de ecran pentru a finaliza designul.

reporniți animația

  • Stânga:
    • Desktop: 50 px
    • Tabletă și telefon: 0 px

reporniți animația

2. Aplicați Reporniți tehnica de animație la proiectare

Adăugați Clasa CSS la rândul 2

Acum că designul nostru este la locul nostru, ne putem concentra asupra tehnicii de repornire a animației. Vom viza mai multe module simultan pentru aceasta. Mai întâi, deschideți setările celui de-al doilea rând și aplicați următoarea clasă CSS:

  • Clasa CSS: trigger-animation-row

reporniți animația

Adăugați modulul de cod la rândul # 1

Clasa CSS pe care am adăugat-o în pasul anterior al acestui tutorial ne va ajuta să vizăm toate modulele din acest rând simultan. Pentru a crea animația de repornire, folosim un cod JQuery, biblioteca GSAP JavaScript și biblioteca ScrollTrigger pentru GSAP. Pentru a adăuga acest cod, vom insera un nou modul de cod sub al doilea modul de text din rândul # 1.

reporniți animația

Adăugați biblioteci GSAP și ScrollTrigger

Asigurați-vă că adăugați bibliotecile GSAP și ScrollTrigger în etichetele de script noi.

  • https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

reporniți animația

Adăugați etichete de script noi

Apoi, adăugați etichete de script noi sub etichetele de script ale bibliotecii.

reporniți animația

Adăugați funcția GSAP + ScrollTrigger

În interiorul noilor etichete script, vom copia lipiți următoarele linii de cod JQuery: 

jQuery(document).ready(function($){

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

Acest cod va viza toate modulele de rând simultan și va reporni animația imediat ce un vizitator intră din nou în fereastra de vizualizare. Animația, în acest caz, este destul de simplă și minimă. Cu toate acestea, cu GSAP și ScrollTrigger, puteți crea orice tip de animație doriți, deci merită cu siguranță să vă uitați!

reporniți animația

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

reporniți animația

Mobil

reporniți animația

Gânduri finale

În această postare, v-am arătat cum să reporniți o animație de îndată ce elementul intră în fereastra de vizualizare. Această abordare vă ajută să creați o experiență consistentă, indiferent de modul în care vizitatorii dvs. derulează. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.