Kreatív kép widget: áttekintés, képanimáció és felfedés görgetéskor

A Kreatív kép widget egyetlen képhez ad mozgást és formát: felfedést görgetéskor, egyedi maszkot, parallax-elmozdulást, 3D billentést rámutatáskor vagy saját GSAP-animációt. Ez a fejezet a widget felépítését, a képanimációt és a görgetéskor felfedett képet írja le. A maszkolás, a görgetés egérrel és a parallax a Kreatív kép: effektek a Stílus fülön fejezetben van.

A widget a Pro bővítmény része.

Mielőtt elkezdesz

• A widget a The Plus Addons → Widgets oldalon kapcsolható be. Keresd meg a Creative Image kapcsolót, és kapcsold be. A kártyán PRO jelvény van, mert a widget csak a Pro bővítményben található.
• A Pro bővítmény nélkül a widget eltűnik a szerkesztőből, és az oldal, amely már használta, üresen jeleníti meg a helyét.
• Előbb válassz képet a Kép kiválasztása mezőben. Kép nélkül a widget a bővítmény szürke helyőrzőjét rajzolja ki, és egyik effektus sem látszik.

Ezután szerkeszd az oldalt Elementorral, és húzd a Kreatív kép widgetet a vászonra.

Tartalom fül

https://minta-bolt.hu/wp-admin/post.php?post=191&action=elementor

A képen az Import Presets gomb, a Kép stílusa, a Kép kiválasztása, a Képfelbontás, a Kép igazítása, a Link célja és a Kép maximális szélessége látszik. A kép alatti kék doboz az Elementor saját képoptimalizálási ajánlója, a widgethez nem tartozik.

A Kép stílusa az első döntés, mert ettől függ, milyen további beállításokat kapsz:

Kép stílusa	Mit csinál	Mit nyit meg
Kreatív kép (alapérték)	A képet hagyományos képként jeleníti meg, amit aztán díszíthetsz	Kép alakjának maszkolása, Szuper parallax és Kép maximális szélessége
Görgetéskor felfedett kép	Egy színes fedőréteget húz le a képről, amikor az görgetéskor látótérbe kerül	Animált háttérszín és Animáció iránya

Az Import Presets gomb készen kapott kialakítást tölt a widgetbe, amit utána szerkeszthetsz.

A Tartalom fül többi beállítása mindkét stílusra érvényes, hacsak nincs másképp jelölve:

Beállítás	Mit csinál	Alapérték
Kép kiválasztása	Maga a kép. A kép alt szövegét az oldal átveszi, ezért a médiatárban töltsd ki	üres
Képfelbontás	Melyik regisztrált képméretet szolgálja ki a WordPress	Tele
Kép igazítása	Balra, középre vagy jobbra, eszközönként
Link célja	Linkbe teszi a képet. A mezőben az új lapon nyitás és a nofollow kapcsolók is működnek	üres
Kép maximális szélessége	A megjelenített szélesség felső határa, eszközönként. Csak a Kreatív kép stílusnál

A Képfelbontás legördülőben a Tele mellett az Egyéni is választható.

Hogyan viselkedik

• A kép alt szövege a médiatár elemből jön, nem a widgetből. Ha a kép link, ugyanez a szöveg lesz a link hozzáférhető neve.
• Kép nélkül a widget a szürke helyőrzőt rajzolja ki, az oldal címével mint alt szöveggel.
• A Görgetéskor felfedett kép stílusban a kép háttérként jelenik meg, teljes méretben, ezért a Képfelbontás nem változtat semmit, a Kép maximális szélessége pedig nem hat.
• A Stílus fül alján lévő On Scroll View Animation és a Haladó fül Plus Extras szakasza az összes Plus Addons widgetnél azonos, itt is úgy működik.

Képanimáció

A Képanimáció szakasz GSAP-alapú animációt ad a képhez, az Elementor saját belépő animációitól függetlenül. A beállításai megegyeznek a Képek egymásra rétegzése widget képanimációjával, de itt egyetlen képre vonatkoznak.

1. Add hozzá a Kreatív kép widgetet, és válaszd ki a képet a Tartalom szakaszban.
2. A Tartalom fülön nyisd meg a Képanimáció szakaszt.
3. Kapcsold be az Animáció engedélyezése kapcsolót.
4. Az Animáció mezőben válaszd az Alap értéket, ha a mozgást itt építed fel, vagy a Globális értéket, ha egy, a Webhelybeállításokban elmentett animációt használnál újra.

https://minta-bolt.hu/wp-admin/post.php?post=191&action=elementor

A képen az Animáció engedélyezése be van kapcsolva, az Indítási típus Görgetésre, ezért megjelent a Görgetéshez igazítás bekapcsolása kapcsoló is. Alatta a Transzformációs hatások, az Animációs vezérlők, az Animációs effektek és az Animáció előnézete gomb látszik.

Mikor fusson: Indítási típus

Az Indítási típus dönti el, mi indítja az animációt, és azt is, mit jelentenek a Transzformációs hatások számai.

Indítási típus	Mikor fut	A transzformációs értékek jelentése
Betöltéskor (alapérték)	Röviddel az oldal betöltése után, bárhol is van a kép	Ahonnan a kép indul, mielőtt a helyére áll
Görgetésre	Egyszer, amikor a widget nagyjából a nézet 80%-ához ér. Visszagörgetve nem játszódik le újra	Ahonnan a kép indul, mielőtt a helyére áll
Rámutatáskor	Minden alkalommal, amikor az egér a widgetre ér, és kilépéskor visszafelé	Ahová a kép mozog, amíg az egér fölötte van

Az utolsó sor sok embert megzavar. Betöltéskor és 1,25-ös Méret mellett a kép 1,25-ről zsugorodik a normál méretre. Rámutatáskor ugyanezzel az 1,25-tel a normál méretről nő 1,25-re, majd vissza.

A mozgás formája

• Transzformációs hatások: felugró panel, amelyet az alapértelmezett és az egyéni mód között kapcsolhatsz. Egyéni módban X és Y eltolás, X és Y dőlés, méret, forgatás, átlátszatlanság, transzformációs origó és vágási alakzat (Clip Path) állítható.
• Animációs vezérlők: szintén felugró panel, amely az egyéni módban az időtartamot (alapérték 1,2 másodperc) és a késleltetést (alapérték 0,3 másodperc) adja.
• Animációs effektek: a gyorsulási görbe. Választható: Power1, Power2, Power3 (alapérték), Elastic, Vissza, Pattogás és Lineáris. A Vissza és az Elastic túllövi a végpontot, és csak utána áll vissza, ettől pattog.
• Animáció lejátszása: az Animáció előnézete gomb a szerkesztőben újra lejátssza a mozgást.

Kötés a görgetősávhoz

Ha az Indítási típus Görgetésre, megjelenik a Görgetéshez igazítás bekapcsolása kapcsoló. Bekapcsolva az animáció nem egyszeri lejátszás többé: az előrehaladása a görgetősávot követi. Ha a látogató félúton jár az oldalon, a kép is félúton jár a mozgásban, felfelé görgetve pedig visszafelé fut. Ilyenkor az időtartam és a késleltetés nem számít, a tempót a görgetés adja.

Vágási alakzatok

A Transzformációs hatások vágási alakzata (Clip Path) a képet alakzatba animálja: kör, ellipszis, háromszög, rombusz, hatszög, csillag, hullámok, átlós alakzatok, foltok, lekerekített sarkok, vagy egyéni alakzat, ahová saját CSS clip-path értéket illeszthetsz. Az alakzat az animáció végpontja, és a kép benne is marad: ha hatszöget választasz, a kép hatszögként ér véget, és úgy is marad.

Globális animáció

A Globális érték egyszer megadott animációt használ újra az egész webhelyen.

1. Kapcsold be a Global Image Animations kiterjesztést a The Plus Addons → Extensions oldalon.
2. Az Elementorban nyisd meg a Webhelybeállításokat, és válaszd a Global Image Animations pontot.
3. Adj hozzá egy sort, nevezd el az Animation Name mezőben, és állítsd be az indítást, az időzítést és a transzformációkat. Mentsd el.
4. A widgeten állítsd az Animáció mezőt Globális értékre, és a Globális animáció legördülőben válaszd ki az elmentett animációt.

Minden widget, amely arra a sorra mutat, átveszi a módosításaidat, így az egész webhely képanimációit egy helyen alakíthatod át.

Hogyan viselkedik az animáció

• A nyilvános oldalon fut. A szerkesztőben az Animáció előnézete gombbal nézheted meg.
• Betöltéskor és Görgetésre a kép teljesen átlátszatlanul kezd, és mozgás közben tűnik elő, bármit is állítottál.
• A Görgetésre a görgetési követés nélkül egyszer fut le. Vissza- és újra lefelé görgetve nem játszódik le újra.
• Ha a Globális értéket választod, de a Globális animáció üres, semmi sem animál, de hiba sincs.

Korlátozások

• A négy Inset vágási alakzat (felül, alul, balra, jobbra felfedő) zárt alakzatba ér, ezért a kép kimozgatja magát a látványból, és eltűnve marad. Használj inkább kör, sokszög vagy folt alakzatot.
• Az Animáció előnézete mindig az alapértelmezett 1,2 és 0,3 másodperces időzítéssel játszik, az egyéni időtartamot és késleltetést figyelmen kívül hagyja. A nyilvános oldalon a megadott érték számít, az időzítést ott ellenőrizd.
• Ha a Kép görgetése be van kapcsolva, semmi sem animál. Az animációnak képcímke kell, a Kép görgetése pedig háttérre cseréli a képet. A szerkesztő erre nem figyelmeztet.
• Ha a Global Image Animations kiterjesztés ki van kapcsolva, a Globális érték alap animációra esik vissza, nem marad hatástalan.
• A Globális animáció mező súgója a Global Scroll Interactions szakaszra mutat, de a keresett fül neve Global Image Animations.

Hibaelhárítás

A kép eltűnt, miután beállítottam egy vágási alakzatot. Valamelyik Inset lehetőséget választottad. Állítsd vissza a vágási alakzatot az alapértékre (nincs alakzat), vagy válassz kört, hatszöget.

A Globális animáció legördülő üres. Vagy a Global Image Animations kiterjesztés ki van kapcsolva, vagy még nem adtál hozzá sort a Webhelybeállításokban.

Az előnézet gyorsabb, mint a valódi oldal. Ez normális: az előnézet mindig az alapértelmezett időzítéssel játszik. Az időtartamot és a késleltetést a nyilvános oldalon ítéld meg.

Semmi sem történik. Nézd meg, hogy a Stílus fülön a Kép görgetése ki van-e kapcsolva, és hogy a nyilvános oldalt nézed-e, nem a szerkesztővásznat.

Felfedés görgetéskor

A felfedő animáció színes panel mögé rejti a képet, és a panelt lehúzza róla, amikor a látogató odagörget. A kép így megérkezik, nem egyszerűen ott van.

1. Add hozzá a Kreatív kép widgetet az oldalhoz.
2. A Tartalom szakaszban állítsd a Kép stílusa értékét Görgetéskor felfedett képre.
3. Válaszd ki a képet a Kép kiválasztása mezőben.
4. Állítsd az Animált háttérszín értékét a lehúzódó panel színére.
5. Az Animáció iránya mezőben válaszd ki, merre távozzon a panel.

https://minta-bolt.hu/wp-admin/post.php?post=192&action=elementor

A képen a Kép stílusa Görgetéskor felfedett kép, alatta az Animált háttérszín és az Animáció iránya látszik.

Beállítás	Mit csinál	Alapérték
Animált háttérszín	A képet takaró, majd lecsúszó panel színe. Ha üresen hagyod, a felfedés ugyanúgy megtörténik, egyszerű világosszürkével	üres
Animáció iránya	Merre húzódik le a panel a képről: Bal, Jobb, Felül vagy Alul	Bal

Válassz a paletta részét képező színt, például márkaszínt vagy a szakasz saját hátterét. A panel a felfedés teljes ideje alatt látszik, ezért az alapértelmezett szürke lényegesen rosszabbul mutat.

https://minta-bolt.hu/km5-felfedes/

A képen a kép már teljesen felfedett állapotban látszik. A felfedés előtt a helyét a beállított színű panel takarta.

Hogyan viselkedik

• A felfedés a nyilvános oldalon indul, amikor a widget nagyjából a nézet 90%-ánál tart.
• Egyszer fut le. Visszagörgetve és újra lefelé görgetve nem ismétlődik, mert egy minden alkalommal újrajátszódó felfedés gyorsan idegesítő.
• A kép háttérként, teljes méretben jelenik meg, ezért tetszőleges oldalarányú képpel is szépen kitölti a tárolóját.

Korlátozások

• A Képfelbontás ebben a stílusban nem hat. Mindig a teljes méretű fájlt használja, ezért a nagy eredetit töltés előtt kicsinyítsd le.
• A Kép maximális szélessége nem hat. A vezérlő csak a Kreatív kép stílushoz van kötve. A méretet a tárolón állítsd.
• A Kép alakjának maszkolása és a Szuper parallax nem érhető el: a két kapcsoló eltűnik, ha a Görgetéskor felfedett kép stílust választod, és a korábban beállított értékeket figyelmen kívül hagyja.
• A kép háttér, nem képcímke, ezért az alt szövege nem kerül az oldalra. Ne használd ezt a stílust olyan képhez, amelyet a képernyőolvasónak le kell írnia.

Hibaelhárítás

A fedőréteg szürke, nem az én színem. Az Animált háttérszín üres. Adj meg színt: a szürke a stíluslap tartaléka, nem szándékos alapérték.

A felfedés soha nem fut le. A nyilvános oldalt nézd, ne a szerkesztőt, és győződj meg róla, hogy a widget a hajtás alatt kezdődik. Ha az oldal betöltésekor már látszik, nincs mit görgetni, ami elindítaná.

Csak az első alkalommal játszik le. Ez a szándék: az animáció oldalbetöltésenként egyszer indul.

Eltűnt a Kép alakjának maszkolása kapcsoló. A maszkolás a Kreatív kép stílushoz tartozik. Állítsd vissza a Kép stílusa mezőt.