Cum se creează o suprapunere de imagini cu modele de animație de declanșare a declanșatorului de text în Divi

Suprapunerile de imagini continuă să fie un element de design popular atunci când afișează imagini pe site-ul dvs. web. Nu numai că oferă o modalitate creativă de a prezenta imagini, dar pot face vizionarea imaginilor mai distractivă și mai atrăgătoare pentru vizitatori, mai ales atunci când adăugați animații personalizate atunci când plasați cursorul sau faceți clic pe imagine.

În acest tutorial, vă vom arăta cum să creați o suprapunere de imagine cu animație de declanșare a textului divizat în Divi. Mai întâi, vă vom arăta cum se creează imaginea personalizată suprapusă cu obloane de text divizate. Apoi, vă vom arăta cum puteți utiliza opțiunile de transformare încorporate ale Divi pentru a crea cele trei modele de animație cu declanșare a imaginii complet unice. Vă vom arăta chiar câteva alte exemple de modele pentru ca acele sucuri creative să curgă.

Să sărim și să începem!

Trage cu ochiul

Iată o privire rapidă asupra proiectelor de suprapunere a imaginilor din acest tutorial.

Iată un codepen care demonstrează același design folosit în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a vă pune mâinile pe desenele de animație a declanșatorului de text de suprapunere a imaginii din acest tutorial, va trebui mai întâi să le 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: Construirea suprapunerii imaginilor cu obloane de text divizate

Pentru această primă parte a tutorialului, vom construi configurarea inițială a suprapunerii imaginii cu obloanele de text divizate. Odată ce acest lucru este făcut, putem adăuga animație la obloane mai târziu.

Randul

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

Înainte, adăugând module, deschideți setările rândului și actualizați lățimea jgheabului:

• Lățimea jgheabului: 2

Actualizarea coloanei

Coloana va fi containerul principal care va ține imaginea noastră și elementele de suprapunere a declanșatorului. De asemenea, va fi ținta principală care va iniția animația obturatorului în timpul deplasării. Cu alte cuvinte, atunci când cursorul se deplasează în interiorul coloanei, animația elementelor copil (obloanele) va porni și când cursorul se deplasează în afara coloanei, animația se va opri.

Pentru a desemna coloana noastră ca „coloană de declanșare” și pentru a o anima mai târziu „la plecare”, adăugați următoarele coloane CSS în coloană:

• Clasa CSS: coloană obturator on-hover

Apoi actualizați revărsările la ascunse, astfel încât să nu vedem elementele transformate odată ce acestea depășesc containerul coloanei în timpul animației.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugarea imaginii principale

În coloana 1, adăugați un modul de imagine. Aceasta va servi ca imagine principală pe care o vom așeza în spatele suprapunerii obturatorului.

Încărcați o imagine în modulul imagine.

Apoi setați alinierea imaginii la centru.

Crearea obturatorului superior cu text divizat

Acum că imaginea noastră este la locul său, vom adăuga declanșatorul de sus folosind un modul de text. Adăugați un nou modul de text sub imagine.

Actualizați conținutul modulului text adăugând textul „divi” în zona corpului.

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

• Font text: Poppins
• Greutate font text: greu
• Stil de text text: TT
• Culoarea textului textului: #ffffff
• Dimensiune text text: 200 px (desktop), 30vw (tabletă și telefon)
• Spațiere scrisoare text: -0.03em
• Înălțimea liniei de text: 0em
• Aliniere text: centru

Apoi, actualizați opțiunile de dimensionare și spațiere:

• Lățime: 100%
• Înălțime: 50%
• Marja: 0 px de jos

Sub fila Advanced, actualizați următoarele:

• Clasa CSS: obturator superior

Vom folosi clasa CSS pentru a comuta animația de transformare activată și dezactivată cu codul nostru mai târziu.

Apoi adăugați acest CSS personalizat la elementul principal:

display:flex;
align-items:flex-end;
justify-content:center;

Acest cod folosește flex pentru a vă asigura că textul este aliniat vertical în partea de jos a modulului. Deoarece textul are o înălțime a liniei de 0, textul va fi afișat ca divizat, arătând doar jumătatea superioară.

Pentru a poziționa obturatorul de sus, trebuie să ascundem mai întâi depășirea textului și apoi să-i dăm o poziție absolută după cum urmează:

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns
• Poziție: Absolută

Aceasta va muta declanșatorul peste jumătatea superioară a imaginii.

Crearea declanșatorului de jos cu textul divizat de potrivire

Acum, când avem declanșatorul de sus finalizat, putem începe cu crearea declanșatorului de jos prin duplicarea modulului de text al declanșatorului de sus.

Apoi deschideți modulul de text duplicat și actualizați următoarele:

• Clasa CSS: obturator superior

Actualizați Elementul principal CSS prin înlocuirea „flex-end” cu „flex-start” pentru proprietatea align-items. Iată CSS final:

display:flex;
align-items:flex-start;
justify-content:center;

Cu „flex-start” textul este aliniat vertical în partea de sus a modulului. Și din moment ce textul are o înălțime a liniei de 0, textul va fi afișat ca divizat, arătând doar jumătatea de jos.

Apoi actualizați poziția absolută cu un decalaj vertical, după cum urmează:

• Decalaj vertical: 50%

Acest lucru aduce modulul text al declanșatorului să stea deasupra jumătății inferioare a imaginii.

Textul divizat de pe ambele obloane ar trebui să fie acum aliniat ca o potrivire perfectă.

În acest moment, am creat cu succes setarea pentru suprapunerea imaginii de declanșare a textului. Aceasta constă din coloana obturatorului ca container, imaginea principală, obturatorul superior care se află în jumătatea superioară a imaginii și obturatorul inferior care se află în jumătatea inferioară a imaginii.

Vom folosi acest lucru ca un fel de șablon de pornire pentru următoarele exemple care vor include animații cu efect de declanșare folosind proprietăți de transformare.

Partea 2: Codul

Pentru a adăuga funcționalitatea animației obturatorului, avem nevoie de câteva fragmente de CSS și JS folosind un modul Code.

Adăugați un nou modul de cod pe pagină. Îl putem adăuga în coloana din dreapta a primei secțiuni superioare pe care am folosit-o pentru construirea noastră inițială de suprapunere.

CSS

Lipiți următorul CSS în caseta de cod, asigurându-vă că îl înfășurați cu etichetele de stil necesare:

  /* transition duration of shutter animation */
  .top-shutter,
  .bottom-shutter {
    transition: transform 1s;
  }
  /* disables all transform options created in
  Divi Builder for both shutters */
  .divi-transform-none .top-shutter,
  .divi-transform-none .bottom-shutter {
    transform: none;
  }
  .on-click {
    cursor:pointer;
  }

Acest CSS este foarte simplu. Tot ce face este să aplice transform: none la obloanele din interiorul coloanei cu clasa „divi-transform-none”. Această clasă va fi activată și dezactivată cu JS pentru a crea animația. Tranziția: transformarea 1 setează pur și simplu durata tranziției (sau animației) să dureze 1 secundă.

JS

După CSS, adăugați următorul JQuery în caseta de cod, asigurându-vă că îl înfășurați cu etichetele de script necesare:

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

Prima parte a codului adaugă funcționalitatea care comută animațiile de transformare a declanșatorului pe hover ori de câte ori o coloană are clasele „shutter-column on-hover divi-transform-none”.

    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

A doua parte a codului adaugă funcționalitatea care comută animațiile de transformare a obturatorului la clic ori de câte ori o coloană are clasele „obturator-coloană la clic divi-transformare-none”.

    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });

Partea 3: Modele de animație de declanșare a declanșatorului de text

Design # 1

Pentru a crea primul nostru design de animație a declanșatorului, vom porni procesul de proiectare prin duplicarea primei secțiuni. Acest lucru ne va oferi o nouă secțiune cu o suprapunere de imagine pre-construită cu obloanele de text divizate gata de pornire.

Adăugați Proprietăți de transformare la declanșatorul superior

În mod normal, când utilizați CSS pentru a anima ceva cu proprietăți de transformare, elementul nu va avea inițial un stil de transformare și apoi stilul de transformare ar fi aplicat ori de câte ori utilizatorul trece sau face clic pe element. În Divi, vom întoarce procesul și vom începe prin adăugarea stilului de transformare la element folosind mai întâi Divi Builder. Acest lucru ne permite să folosim opțiunile de transformare încorporate în timp ce editați vizual designul. Apoi, odată ce am terminat de adăugat toate elementele de proiectare a transformării, le putem dezactiva inițial (folosind o clasă CSS) și apoi o putem comuta și dezactiva atunci când utilizatorul interacționează cu suprapunerea.

Pentru a adăuga designul transformării la declanșatorul superior, deschideți setările modulului text al declanșatorului superior și actualizați următoarele:

• Scala de transformare (X și Y): 150%
• Transformă axa Y tradusă: -101%
• Transform Origin: centru de sus

Dacă ați făcut-o corect, declanșatorul superior nu va mai fi vizibil, ceea ce ne dorim, deoarece vrem ca întreaga imagine principală să fie expusă după tranziția animației.

Adăugați Proprietăți de transformare la declanșatorul inferior

Pentru declanșatorul inferior, actualizați următoarele opțiuni de proiectare a transformării:

• Scala de transformare (X și Y): 150%
• Transformă axa Y tradusă: 101%
• Transformă originea: centrul de jos

Adăugați o clasă pentru a dezactiva inițial modelele de transformare

Așa cum am menționat mai devreme, odată ce am terminat de adăugat modelele de transformare necesare pentru animația obturatorului, putem dezactiva inițial aceste modele de transformare prin adăugarea unei clase CSS.

Datorită codului CSS personalizat pe care l-am adăugat mai devreme, designul va apărea fără a avea modele de transformare în loc.

Adăugați funcționalitate la clic cu o singură clasă

Pentru a obține aceeași animație declanșată la clic în loc de a plasa, nu trebuie decât să înlocuim o singură clasă din coloană.

În primul rând, copiați coloana 1 cu primul nostru exemplu de lucru pe hover. Apoi ștergeți coloana goală. Acum ar trebui să aveți două coloane identice cu aceleași clase și conținut.

Deschideți setările pentru coloana 2 și înlocuiți clasa „on-hover” cu clasa „on-click”. Iată care ar trebui să fie ultimele trei clase:

• Clasa CSS: obturator-coloană la clic pe divi-transform-none

Rezultat

Inversarea animației obturatorului pe Hover

Dacă doriți ca imaginea principală să fie afișată inițial neacoperită și apoi adăugați suprapunerea când treceți cu mouse-ul peste imagine (inversul modului în care funcționează acum), puteți elimina clasa „divi-transform-none” din coloana utilizată pentru obturator . Acest lucru vă va oferi următorul efect.

Design # 2

Pentru a crea a doua animație de declanșare, putem folosi secțiunea anterioară duplicată cu prima noastră animație de declanșare.

Actualizați obloanele

Apoi utilizați multiselect pentru a selecta modulele de declanșare superioare și de declanșare inferioare. Apoi deschideți setările elementului pentru ambele și actualizați următoarele:

• Fundal: #ffffff
• Culoarea textului textului: # 000000
• Blend Mode: ecran

Rezultat

Design # 3

Pentru a crea al treilea design de suprapunere a imaginii de animație a obturatorului, copiați secțiunea anterioară.

Adăugați o imagine nouă

Apoi actualizați modulul de imagine cu o imagine nouă.

Actualizați obloanele

Folosiți multiselectarea pentru a selecta atât modulele de declanșare superioare cât și cele ale declanșatorului inferior și deschideți setările elementului pentru ambele pentru a actualiza următoarele:

• Conținutul corpului: d

• Fundal: rgba (0,0,0,0,9)
• Culoarea textului textului: #ffffff
• Dimensiune text text: 450 px (desktop), 70vw (tabletă și telefon)
• Blend Mode: Multiplicare

Deschideți setările modulului de declanșare superior și actualizați următoarele opțiuni de transformare:

• Scară de transformare (X și Y): 100% (implicit)
• Transformă axa Y tradusă: -101%
• Transformare Rotire axa Z: -45 grade
• Transformă originea: stânga sus

Apoi actualizați setările modulului de declanșare inferior și actualizați următoarele opțiuni de transformare:

• Scară de transformare (X și Y): 100% (implicit)
• Transformă axa Y tradusă: 101%
• Transformare Rotire axa Z: -45 grade
• Transformă originea: dreapta jos

Rezultat

Mai multe exemple și posibilități

Iată câteva exemple de modele folosind aceleași tehnici.

Iată una care este similară cu proiectarea # 2, dar fără scala de transformare de pe obloane. De asemenea, arată cum funcționează efectul lightbox pe imagine.

Și iată un alt exemplu care folosește transformate pentru a glisa obloanele orizontal.

Rezultate finale

Gânduri finale

Crearea suprapunerilor de imagini cu animații de declanșare a textului divizat în Divi poate fi o abordare eficientă pentru a face imaginile să iasă în evidență și să atragă vizitatorii într-un mod nou.

Sperăm că acest lucru vă va declanșa creativitatea pentru a adăuga propriile modele și a transforma efectele de animație folosind diferite culori, fonturi, moduri de amestecare etc. Posibilitățile par nesfârșite.

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

Noroc!