Efect de hover unic pentru repetitoarele Oxygen Builder
Publicat: 2022-04-10În acest tutorial, vom crea un efect de hover unic pentru conținutul afișat în Repeatoarele Oxygen Builder. Modelat pe baza „Efectului Hover Distorsion” Codrops și folosind codul sursă din acea resursă, acest efect va crea o estompare distorsionată la o imagine definită de utilizator atunci când un vizitator trece pe o celulă repetoare.
Acest tutorial va încorpora câteva concepte interesante ale Oxygen Builder:
- Tehnici avansate de repetare
- Grupuri de câmp ACF și integrare manuală cu Oxygen Builder
- Grilă CSS de bază
- Atribute dinamice
- Utilizarea blocurilor de cod și JS intermediar
Făcând un pas mai departe, vom face din aceasta o caracteristică 100% dinamică, ceea ce înseamnă că va fi setată și uitată. Nu este nevoie să inițializați un efect specific pentru fiecare celulă!
Follow Along (Descărcare sursă):
Notă: aceasta este o dovadă a conceptului și, probabil, necesită optimizare pentru utilizarea în site-urile de producție.
Alte doua lucruri:
- Lansăm un curs Oxygen Builder. Puteți afla mai multe aici și puteți să vă înscrieți pe lista de așteptare.
- Acesta a fost un tutorial solicitat în minunatul nostru grup de Facebook . Ne-ar plăcea să vă alăturați!
Demo efect:
Pasul 1: Câmpuri ACF
Vom folosi ACF pentru a face acest lucru 100% dinamic și ușor de editat pentru utilizatorul final. Creați un grup de câmpuri și adăugați o imagine de trecere și o imagine de deplasare. Imaginea inițială va fi imaginea prezentată a postării. Imaginea de trecere cu mouse-ul este ceea ce efectul se va estompa atunci când vizitatorul trece cu mouse-ul peste o postare repetitoare.
Imaginea deplasată este cea care va fi folosită pentru a face animația unică de transformare/decolorare între cele două imagini. În acest exemplu, folosim următoarele imagini pentru deplasare:
De fapt, puteți utiliza orice imagine, dar imaginile alb-negru cu o textură excelentă sunt de obicei cele mai bune. Este ușor să experimentezi această metodă!
Iată cum arată grupul de câmpuri și imaginile asociate atunci când adăugați o nouă postare:
Pasul 2: Creați structura efectului
În esență, copiem codul sursă din exemplul Codrops, cu modificări minore.
Pur și simplu duplicăm structura HTML de mai sus, cu elemente Oxygen Builder. Nu uitați să adăugați clasele din exemplul HTML de mai sus, deoarece vom adăuga câteva CSS și JS le folosește pentru a identifica elemente specifice. Dacă modificați aceste clase, va trebui să actualizați CSS și JS în consecință.
Repeatorul nostru folosește grila CSS pentru a spația uniform toate celulele fără prea multă muncă:
Pasul 3: faceți dinamic
Există mai multe lucruri de configurat pentru a fi dinamic. Mai întâi, faceți interogarea repetitorului tipul WordPress Post.
Apoi, setați data și titlul postării să fie dinamice.
Acum, vom configura cele trei imagini. Aici lucrurile se pot complica. Setați adresa URL a imaginii 1 să fie adresa URL a imaginii prezentate.
Setați adresa URL a imaginii 2 să fie imaginea de tip hover, setată în ACF. Pentru acest tutorial, câmpurile ACF nu au fost afișate în fereastra pop-up „inserați date dinamice” (probabil din cauza unei erori Oxygen Builder 4.0 Beta 2). Există o soluție ușoară dacă experimentați vreodată asta:
1 - Introduceți datele dinamice
2 - Selectați PHP Function Return Value
3 - inserați manual conținutul câmpului ACF cu get_field('fieldname')
În cele din urmă, trebuie să setăm imaginea de distorsiune pe care efectul o va folosi pentru a face tranziția morph. Acesta este inserat în HTML ca un atribut de date, pe care JS-ul îl citește și îl încorporează în efect. Din HTML-ul de mai sus, putem vedea că există mai multe atribute, care pot fi editate pentru a schimba efectul.
Principalul lucru pe care trebuie să îl facem dinamic este deplasarea datelor, care va avea adresa URL a imaginii setată în postare folosind ACF. Am codificat greu celelalte trei atribute, dar puteți folosi aceeași metodă prezentată mai jos pentru a face și acești utilizatori editabili.
Accesați elementul de ambalare a imaginii (div-ul din jurul celor două imagini dinamice). Faceți clic pe Avansat -> Atribute și adăugați următoarele.
Pentru data-displacement , vom face acest lucru dinamic făcând clic pe butonul data+ din conținut și inserând câmpul ACF corespunzător.
HTML-ul de interfață va arăta astfel, iar JS va folosi toate aceste date (care sunt dinamice și pot fi editate de utilizator prin ACF) pentru a crea efectul cool de hover deplasare pe WordPress:
Pasul 4: Adăugați CSS, biblioteci și JS
Vom adăuga următorul CSS la foaia noastră de stil CSS universal. Poate fi necesar să jucați cu stiluri CSS suplimentare pentru ca totul să funcționeze bine.
În cele din urmă, vom încărca bibliotecile JS necesare și codul (am făcut asta cu un bloc de cod):
Utilizăm Static pentru exemplul nostru (trăgând bibliotecile ImagesLoaded și Hover Effect din GitHub), dar în mod ideal ar trebui să găzduiești acest lucru pe site-ul tău, folosind un instrument precum Scripts Organizer sau Advanced Scripts.
De asemenea, încărcăm Three.JS și TweenMax.JS, care sunt cele două biblioteci de bază care lucrează pentru a genera efectul de deplasare.
În cele din urmă, JS face următoarele - identifică când sunt încărcate imaginile și aplică efectul de hover oricărui element care are .grid__item-img , trăgând imaginile asociate și imaginile deplasate din fiecare postare. Complet dinamic și va funcționa indiferent de numărul de postări returnate de repetitorul Oxygen Builder.
După ce ați adăugat toate acestea, efectul dvs. ar trebui să funcționeze!
Acest lucru a fost solicitat de un membru al grupului nostru izotrop de Facebook. Vă invităm să vă alăturați aici.