# Képek egymásra rétegzése: szöveg, Lottie, felugró ablak és képanimáció

> Szöveges és Lottie réteg a kollázsban, felugró ablak vagy link a rétegekhez, és a GSAP-alapú Képanimáció szakasz.

A **Képek egymásra rétegzése** widget alapjait az [áttekintő fejezet](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kaszkad-attekintes/) írja le. Itt a további rétegtípusok, a felugró ablak és a képanimáció következik. A widget a Pro bővítmény része, és az **Image Cascading** kapcsolóval kapcsolható be a **The Plus Addons → Widgets** oldalon.

## Szöveges réteg

Egy rövid sor, például egy ár, egy évszak vagy egy név a képek közé téve tervezett látványt ad a kollázsnak. A szöveg ugyanúgy réteg, mint a képek: ugyanazokkal a csúszkákkal pozícionálod, és ugyanabban a veremben áll.

1. A **Képek egymásra rétegzése** szakaszban kattints a lista alatti gombra (**Add Item**) új réteghez, vagy nyiss meg egy meglévőt.
2. A **Réteg típusa** legyen **Szöveges tartalom**.
3. Írd a sort a **Szöveges tartalom** mezőbe.
4. A **Réteg pozíciója** alatt a **Bal (automatikus / %)**, **Fent (automatikus / %)** és **Szélesség** beállítással helyezd el, pont úgy, mint a képet.
5. Frissítsd az oldalt, és nézd meg a nyilvános oldalon.

![Két kép és egy szöveges réteg a kollázsban](./kepek/kepek-media-kaszkad-szoveg.webp)

*Két kép és egy szöveges réteg a kollázsban* (https://minta-bolt.hu/km4-kaszkad-szoveg/)

A képen a „Kézzel készült kerámia” szöveg a két kép alatt áll, a **Szöveg színe** sötétkék.

### A szöveg formázása

A szöveges réteg a képbeállítások helyett a saját beállításait kapja:

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Szöveg tipográfiája** | Betűtípus, méret, vastagság, sormagasság, betűköz | A sablonból öröklődik |
| **Szöveg színe** | A szöveg színe | Örökölt |
| **Szöveg színe rámutatáskor** | A szín, amíg az egér a réteg fölött van | üres |
| **Háttér típusa** | A szöveg mögötti háttér: egyszínű, kép vagy színátmenet | Nincs |
| **Keretsugár** | A háttér sarkainak lekerekítése | üres |
| **Szövegárnyék** | CSS-szövegárnyék a soron | Nincs |
| **CSS-háttérszűrő** | Csak szöveges rétegen. A szöveg mögötti terület **Szélesség**ét, **Magasság**át, **Elmosás**át és **Szürkeárnyalatos** értékét állítja, így az alatta lévő fénykép elmosódik vagy színtelenedik | Ki |

### Hogyan viselkedik

- Az **Extra opciók** többi eleme (**Folyamatos hatás**, **Kép alakjának maszkolása**, **Mágikus görgetés**, **Eszköztipp**, **Speciális effektus**, **Parallax elmozdulás**, **Billentés rámutatáskor**, **Link / felugró ablak**) a szöveges rétegen is elérhető, nem csak a képen.
- A **Szélesség** legnagyobb szélesség, ezért egy hosszú sor a rétegen belül tördelődik, és nem szélesíti a réteget.

### Korlátozások

- A **Szöveges tartalom** egyszerű, egysoros mező. Nincs szövegszerkesztő, sortörés és címsorcímke, ezért a szöveg a keresőoptimalizálás és a képernyőolvasók számára nem címsor.
- A szöveges rétegek nem vesznek részt a **Diavetítés** forgásában: a rétegeket váltó szkript csak a kép és a Lottie rétegeket veszi fel.
- A csak képekhez tartozó beállítások (**Átfedés háttere**, **Átlátszatlanság**, **Transzformációs CSS** és **Reszponzív láthatóság**) szöveges rétegen nem látszanak.

### Hibaelhárítás

**A szöveget elrejti egy fénykép.** A rétegeket a lista sorrendjében rajzolja a widget, és az utolsó elem van legfelül. Húzd a szöveges elemet a képek alá a listában.

**A szöveg olvashatatlan egy zsúfolt fotón.** Adj neki **Háttér típusa** értéket, vagy kapcsold be a **CSS-háttérszűrő**t, és adj hozzá **Elmosás**t, hogy a mögötte lévő kép elmosódjon.

**A sor kilóg a widgetből mobilon.** Nyisd meg a **Réteg pozíciója** **Mobil** fülét, kapcsold be a **Reszponzív értékek** kapcsolót, és adj a rétegnek saját szélességet és pozíciót.

## Lottie réteg

A Lottie egy kis JSON-fájl, amely éles vektoranimációként játszik bármilyen méretben, ezért jól illik a képkollázshoz.

Szükséged van az animáció JSON-címére. A LottieFiles oldalán nyisd meg az animációt, menj a **Handoff** fülre, kapcsold be az **Enable asset CDN** lehetőséget, és válaszd a **Lottie JSON** formátumot a hivatkozáshoz. A saját tárhelyedről is működik, ha a cím `.json`-ra végződik.

### Lottie réteg hozzáadása

1. Nyisd meg a **Képek egymásra rétegzése** szakaszt, és az első elemet a **Több lépcsőzetes szakasz hozzáadása** alatt. A pozíció számít, lásd lent.
2. A **Réteg típusa** legyen **Lottie**.
3. Illeszd a JSON-címet a **Lottie URL** mezőbe.
4. Helyezd el a réteget a **Bal (automatikus / %)**, **Fent (automatikus / %)** és **Szélesség** beállítással, mint bármely másikat.
5. Frissítsd az oldalt, és nézd meg az animációt a nyilvános oldalon.

A Lottie réteg legyen az első. A Lottie réteg csak akkor játszik, ha a **Több lépcsőzetes szakasz hozzáadása** lista első eleme. Bármely későbbi helyen a lejátszó szkript nem töltődik be, és semmi sem rajzolódik ki.

![Forgó Lottie-animáció a fénykép mellett a kollázsban](./kepek/kepek-media-kaszkad-lottie.webp)

*Forgó Lottie-animáció a fénykép mellett a kollázsban* (https://minta-bolt.hu/km4-kaszkad-lottie/)

A képen a Lottie-animáció, a 220 × 220 képpontos kék forgó körív a fénykép mellett áll. A Lottie réteg a lista első eleme.

### Az animáció szabályozása

A méret- és lejátszási beállítások a **Stílus** fül Lottie szakaszában vannak. A widget egészére vonatkoznak, ezért minden Lottie réteg ugyanazokat az értékeket használja.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Szélesség** / **Magasság** | A doboz, amelybe az animáció rajzolódik, képpontban. Állítsd be mindkettőt: üresen a widget 100 képpontra esik vissza | üres (100 px) |
| **Sebesség** | A lejátszás sebességének szorzója | 1 |
| **Animáció ismétlése** | Ismétli az animációt ahelyett, hogy egyszer lejátszaná | Be |
| **Rámutatáskor megjelenő animáció** | Csak akkor játszik, ha az egér a réteg fölött van, magától nem | Ki |
| **CSS Filters** | Elmosás, fényerő, kontraszt, telítettség és színárnyalat, normál és rámutatásos állapotra | Nincs |

### Korlátozások

- A Lottie réteg csak a lista első elemeként játszik.
- A Lottie stílusbeállításai a widgetre vonatkoznak, nem rétegenként, ezért két Lottie réteg ugyanabban a widgetben nem lehet különböző méretű vagy sebességű.
- A címnek `.json`-ra kell végződnie. Minden más a réteg helyén az „Opps!! Please Enter Only JSON File Extension.” üzenetet írja ki.
- A fájlt onnan tölti le, ahová a hivatkozás mutat, ezért egy lassú vagy tiltott CDN miatt az animáció meg sem jelenik.

### Hibaelhárítás

**Nem rajzolódik ki semmi, ahol a Lottie-nak lennie kellene.** Ellenőrizd, hogy a Lottie réteg a lista első eleme-e, és hogy a **Szélesség** és **Magasság** be van-e állítva a **Stílus** fül Lottie szakaszában.

**Az „Opps!! Please Enter Only JSON File Extension” üzenet látszik.** A hivatkozás nem JSON-fájl. A Lottie JSON-címet a LottieFiles **Handoff** füléről másold ki, ne az oldal címét vagy egy GIF-exportot.

**Az animáció egy apró négyzet.** A **Szélesség** és a **Magasság** üres, ezért a widget a 100 képpontos tartalékot használja. Állítsd be mindkettőt.

## Felugró ablak vagy link a rétegen

Egy képkollázs jó hely a plusz részletekhez: a látogató rákattint az egyik fotóra, és egy videó, egy térkép vagy egy nagyobb kép nyílik meg az oldal fölött. A widget minden rétege ezt külön tudja a **Link / felugró ablak** beállítással.

Szükséged van a megjelenítendő tartalom URL-jére: egy YouTube- vagy Vimeo-videó oldalára, egy Google Maps beágyazási címre vagy egy kép közvetlen hivatkozására.

### Felugró ablak hozzáadása egy réteghez

1. Nyisd meg a **Képek egymásra rétegzése** szakaszt, és azt az elemet, amelyet kattinthatóvá szeretnél tenni.
2. Állítsd be a **Réteg típusa** értéket, és add meg a tartalmát a szokásos módon. A beállítás minden elem alján ott van, bármilyen a réteg típusa. Mi egy **Kép** rétegen próbáltuk ki.
3. Görgess a **Link / felugró ablak** mezőhöz, és válaszd a **Felugró ablak** lehetőséget.
4. Illeszd az URL-t a megjelenő **Felugró ablak tartalma** mezőbe.
5. Frissítsd az oldalt, és kattints a rétegre a nyilvános oldalon.

A réteg linkké válik, és kattintásra az oldal elsötétül, a tartalom pedig egy lightboxban nyílik meg, bezárás gombbal.

![A kollázs fölött megnyílt lightbox a kapcsolt képpel](./kepek/kepek-media-kaszkad-popup.webp)

*A kollázs fölött megnyílt lightbox a kapcsolt képpel* (https://minta-bolt.hu/km4-kaszkad-popup/)

A képen a lightbox a megnyitott képet mutatja, alatta a bezárás gomb, a háttérben a sötétített kollázs.

### Hogyan viselkedik

- Minden elemnek saját **Link / felugró ablak** beállítása van, ezért több rétegnek adhatsz különböző felugró ablakot, a többi pedig maradhat sima kép.
- A lightbox az URL alapján dönti el, mit tegyen: a videóoldalból beágyazott lejátszó lesz, a kép URL-jét teljes méretben mutatja, minden mást pedig keretben tölt be.
- A látogató a lightbox sarkában lévő bezárás gombbal zárja be.
- A **Link** a másik lehetőség ugyanabban a legördülőben. Ez a réteget hagyományos linkké teszi, a szokásos **Link** mezővel és az új lapon nyitás és nofollow kapcsolókkal.

### Korlátozások

- A **Felugró ablak tartalma** csak URL-t fogad el. Nem választható Elementor-sablon vagy mentett felugró ablak a lightboxhoz.
- Egy réteg lehet link vagy felugró ablak, a kettő együtt nem.
- Egyes weboldalak nem engedik, hogy keretben jelenjenek meg. Ha a lightbox üresen nyílik meg, a cél blokkolja a beágyazást, használd a hivatalos beágyazási URL-jét.

### Hibaelhárítás

**A rétegre kattintva nem történik semmi.** Ellenőrizd, hogy a **Link / felugró ablak** **Felugró ablak**ra van-e állítva, és hogy a **Felugró ablak tartalma** ki van-e töltve. Üres mezőnél a réteg nem kattintható.

**A lightbox megnyílik, de üres marad.** Az URL valószínűleg nem beágyazható. YouTube-hoz a hagyományos megtekintési URL-t használd, Google Mapshez pedig a térkép **Megosztás → Térkép beágyazása** paneljén kapott URL-t.

**A felugró ablak a kollázs mögött nyílik meg.** Nézd meg, hogy a szülőtárolónak vagy egy ragadós fejlécnek nincs-e egyéni z-indexe.

## Réteg maszkolása egyedi alakra

A maszkolás a téglalap alakú fotót alakzaton keresztül mutatja: körön, csillagon, ecsetvonáson vagy logósziluetten. A kollázsban ez akadályozza meg, hogy a rétegek dobozkupacnak látsszanak. A widget minden rétegének saját **Kép alakjának maszkolása** kapcsolója van, ezért az egyik réteget maszkolhatod, a többi maradhat négyszögletes.

Szükséged van az alakzatra fájlként: átlátszó hátterű PNG-re vagy SVG-re. A fájl átlátszatlan része marad látható, minden átlátszó levágódik.

### Egy réteg maszkolása

1. A **Képek egymásra rétegzése** szakaszban nyisd meg a maszkolni kívánt elemet.
2. Állítsd be a **Réteg típusa** értéket, és add meg a tartalmát. A kapcsoló a **Kép** és a **Szöveges tartalom** rétegen érhető el, mi egy képen próbáltuk ki.
3. Görgess az **Extra opciók** részhez, és kapcsold be a **Kép alakjának maszkolása** kapcsolót.
4. A megjelenő **Maszkolt kép** mezőben töltsd fel vagy válaszd ki az alakzatot.
5. Frissítsd az oldalt, és nézd meg a nyilvános oldalon.

![Ugyanaz a kép kétszer: balra négyszögletesen, jobbra csillag alakúra vágva, lágy árnyékkal](./kepek/kepek-media-kaszkad-maszk.webp)

*Ugyanaz a kép kétszer: balra négyszögletesen, jobbra csillag alakúra vágva, lágy árnyékkal* (https://minta-bolt.hu/km5-kaszkad-maszk/)

A képen a bal oldali réteg nincs maszkolva, a jobb oldali csillag alakú PNG-vel van maszkolva, és a **Kép árnyéka** mezőbe írt árnyék követi a csillag körvonalát.

### Kép árnyéka

A **Maszkolt kép** alatti **Kép árnyéka** egyszerű szövegmező, nem színválasztó. Írj bele CSS árnyékértéket, például `6px 8px 12px rgba(0,0,0,0.55)`. A widget CSS `drop-shadow()` szűrőként alkalmazza, amely a maszkolt körvonalat követi, ezért az árnyék a csillag vagy az ecsetvonás alakját rajzolja ki, nem körülötte egy téglalapot. Éppen ezért van itt, nem egy hagyományos dobozárnyék.

### Hogyan viselkedik a maszk

- A maszk kitölti a réteget, ezért az a fotótól eltérő arányú alakzat torzul. Vágd a maszkfájlt nagyjából a kép arányára.
- A maszkolás rétegenként állítható: bekapcsolod az egyiken, a többi érintetlen marad.
- A maszkfájlból csak az alakzat számít, a színeit figyelmen kívül hagyja, csak az átlátszatlan és az átlátszó terület különbsége fontos.

### Maszk korlátozásai

- Nincs méret-, pozíció- és ismétlésvezérlő a maszkhoz, és beépített alakzattár sincs: a fájlt te adod meg.
- A **Kép árnyéka** ellenőrizetlen szöveg: elírásnál nincs árnyék és figyelmeztetés sem.
- A puha, félig átlátszó szélű maszk a rétegnek is puha szélt ad, ami nagy méretnél elmosódottnak látszhat. Éles alakzathoz kemény szélű fájlt használj.

### Maszk hibaelhárítása

**A réteg teljesen eltűnt.** A maszkfájlnak nincs átlátszatlan területe: általában JPG, amelyben egyáltalán nincs átlátszóság, vagy kitöltött útvonal nélküli SVG. Használj átlátszó hátterű PNG-t.

**Az alakzat összenyomódott.** A maszk a réteg dobozához nyúlik. Készítsd a maszkfájlt a kép alakjára, vagy állítsd a réteg **Szélesség** értékét.

**Nem történt semmi.** Ellenőrizd, hogy a **Kép alakjának maszkolása** be van-e kapcsolva, és hogy a **Maszkolt kép** mezőben van-e fájl. Bekapcsolt kapcsolónál és üres mezőnél a réteg érintetlen marad.

## Képanimáció

Egy kollázs, amely az érkezéskor magától áll össze, tudatos hatást kelt: a fotók becsúsznak, felúsznak, és a helyükre állnak. A widget **Képanimáció** szakasza GSAP-alapú animációt ad a rétegek képeihez, egyéni kód nélkül.

Építsd fel előbb a kollázst, mert az animáció a **Több lépcsőzetes szakasz hozzáadása** listában már meglévő képeken fut.

### Az animáció bekapcsolása

1. A **Tartalom** fülön nyisd meg a **Képanimáció** szakaszt, és kapcsold be az **Animáció engedélyezése** kapcsolót.
2. Az **Animáció** mezőben válassz **Alap** értéket, ha a mozgást itt a widgetben állítod, vagy **Globális** értéket, ha egy, a webhelybeállításokban egyszer már megadott animációt használnál újra.
3. Válassz **Indítási típus** értéket: **Betöltéskor**, **Görgetésre** vagy **Rámutatáskor**.
4. Nyisd meg a **Transzformációs hatások** beállítást, és add meg a kezdőeltolást, a dőlést, a méretet, a forgatást, az átlátszatlanságot és a transzformációs origót: ezekből az értékekből indul az animáció.
5. Az **Animációs vezérlők** a hosszt és a késleltetést adják, az **Animációs effektek** a gyorsulási görbét.
6. Az **Animáció lejátszása** sor **Animáció előnézete** gombjával lejátszhatod a szerkesztőben, majd frissítsd az oldalt, és nézd meg a nyilvános oldalon.

![A Képanimáció szakasz bekapcsolt animációval](./kepek/kepek-media-kaszkad-animacio-panel.webp)

*A Képanimáció szakasz bekapcsolt animációval* (https://minta-bolt.hu/wp-admin/post.php?post=180&action=elementor)

A képen az **Animáció engedélyezése** be van kapcsolva, az **Animáció** **Alap**, az **Indítási típus** **Betöltéskor**, alatta a **Transzformációs hatások**, az **Animációs vezérlők**, az **Animációs effektek** (**Power3**) és az **Animáció előnézete** gomb.

### A beállítások

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Animáció engedélyezése** | Az egész szakaszt bekapcsolja | Ki |
| **Animáció** | **Alap** vagy **Globális** | **Alap** |
| **Indítási típus** | A **Betöltéskor** egyszer játszik, az oldal megnyitásakor. A **Görgetésre** akkor, amikor a widget látótérbe kerül. A **Rámutatáskor** akkor, ha az egér fölötte van | **Betöltéskor** |
| **Transzformációs hatások** | A kezdőállapot: X és Y eltolás, dőlés, méret, forgatás, átlátszatlanság, transzformációs origó és egy elhagyható vágási maszkos felfedés | Nincs eltolás, 1-es méret, 1-es átlátszatlanság |
| **Animációs vezérlők** | Időtartam és késleltetés másodpercben | 1,2 s, késleltetés 0,3 s |
| **Animációs effektek** | A gyorsulási görbe: Power1, Power2, Power3, Elastic, Back, Bounce vagy nincs | Power3 |

### Globális animáció

A **Globális** egyszer megadott animációt használ újra, így egy egész webhely ugyanazt a belépést kaphatja. Előbb hozd létre a webhelybeállításokban, majd válaszd ki a **Globális animáció** legördülőből, amely a transzformációs beállítások helyére kerül.

### Hogyan viselkedik

- Az animáció a rétegekben lévő képeket mozgatja. A tesztben a réteg képe 160 képponttal balra és teljesen átlátszatlanul indult, és nagyjából 1,4 másodperc alatt, lassuló mozgással a helyére állt.
- Egy beállításcsoport a widget összes rétegére vonatkozik, nincs rétegenkénti animáció.
- A nyilvános oldalon fut. Az **Animáció előnézete** gomb azért van, mert a szerkesztővászon nem a megítélés helye.

### Korlátozások

- A beállítások widgetenkéntiek, nem rétegenkéntiek, ezért a rétegek nem időzíthetők eltolva, és nem kaphatnak különböző mozgást ebből a szakaszból.
- Mivel a rétegek képeit animálja, a **Szöveges tartalom** rétegnek nincs mit mozgatnia.
- A **Betöltéskor** oldalbetöltésenként egyszer játszik le. Ismétlés vagy visszafordítás nincs.
- A **Globális** értékhez előbb léteznie kell az animációnak a webhelybeállításokban, addig a legördülő üres.

### Hibaelhárítás

**Nem animál semmi.** Ellenőrizd, hogy az **Animáció engedélyezése** be van-e kapcsolva, és hogy a **Transzformációs hatások** tényleg változtat-e valamit: eltolás nélkül, 1-es méretnél és 1-es átlátszatlanságnál a kép onnan animál, ahol már van, ezért nincs mit látni.

**Az animáció véget ér, mielőtt megnézném.** Állítsd az **Indítási típus** értékét **Görgetésre**, hogy a widget látótérbe kerülésekor induljon, vagy növeld a késleltetést az **Animációs vezérlők** alatt.

**A Globális animáció legördülő üres.** Még nem hoztál létre globális képanimációt. Előbb add hozzá a webhelybeállításokban.