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

> A Kreatív kép widget beállításai, a GSAP-alapú képanimáció, a globális animáció és a görgetéskor felfedett kép.

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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kreativ-effektek/) 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

![A Kreatív kép widget Tartalom füle](./kepek/kepek-media-kreativ-panel-tartalom.webp)

*A Kreatív kép widget Tartalom füle* (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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kaszkad-retegek/) 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.

![A Képanimáció szakasz bekapcsolt animációval, görgetésre indítva](./kepek/kepek-media-kreativ-panel-animacio.webp)

*A Képanimáció szakasz bekapcsolt animációval, görgetésre indítva* (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ép**re.
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.

![A Görgetéskor felfedett kép stílus beállításai a Tartalom szakaszban](./kepek/kepek-media-kreativ-panel-felfedes.webp)

*A Görgetéskor felfedett kép stílus beállításai a Tartalom szakaszban* (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.

![A felfedett kép a nyilvános oldalon, a fedőpanel lehúzódása után](./kepek/kepek-media-kreativ-felfedes.webp)

*A felfedett kép a nyilvános oldalon, a fedőpanel lehúzódása után* (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.