# Kreatív kép: görgetés egérrel, maszkolás, parallax és további effektek
> A Kreatív kép widget Stílus fülének effektjei: kép görgetése rámutatáskor, egyedi alakú maszk, szuper parallax, billentés, szegély és reszponzív láthatóság.
A **Kreatív kép** widget minden effektje a **Stílus** fül **Kép stílusa** szakaszában van, mindegyik saját kapcsoló mögött. Az effektek egymástól függetlenek, de egyszerre többet bekapcsolni általában hiba. A widget alapjait, a képanimációt és a görgetéskor felfedett képet a [Kreatív kép áttekintése](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kreativ-attekintes/) írja le.
*A Kreatív kép widget Stílus füle* (https://minta-bolt.hu/wp-admin/post.php?post=191&action=elementor)
A képen a **Kép görgetése**, a **Kép alakjának maszkolása**, a **Szuper parallax**, a **Parallaxis egérmozgással**, a **Mágikus görgetés**, a **3D billentéses parallaxis**, a **Speciális átfedési effektus**, a **Szegély** és a **Reszponzív láthatóság** kapcsoló látszik. A 3D billentés itt be van kapcsolva.
| Kapcsoló | Mit csinál | Alapérték |
|---|---|---|
| **Kép görgetése** | A magas képet rögzített magasságú keretbe vágja, és fentről lefelé tolja, amíg az egér a kép fölött van. A képet háttérre cseréli, ezért nem marad `img` az oldalon | Elrejtés |
| **Kép alakjának maszkolása** | A képet az általad megadott PNG alakjára vágja. Csak a **Kreatív kép** stílusnál | Elrejtés |
| **Szuper parallax** | A kép egy második másolatát oldalra csúsztatja, miközben az oldalt görgetik. Csak a **Kreatív kép** stílusnál | Elrejtés |
| **Parallaxis egérmozgással** | A képet eltolja, ahogy az egér mozog fölötte, a **Parallax beállítások** sebességével | Ki |
| **Mágikus görgetés** | A képet egy kezdő és egy végpozíció között mozgatja görgetés közben. Alapból 50 képpontot megy felfelé | Ki |
| **3D billentéses parallaxis** | Rámutatáskor a kép az egér felé billen. Alapértékek: Max 20, Scale 1,1, Speed 400, Transform Perspective 400 | Ki |
| **Speciális átfedési effektus** | Két színt söpör át a képen, amikor az a nézetbe lép. Alapszínek: `#313131` és `#ff214f` | Ki |
| **Szegély** | Szegély stílusa, szélessége és színe, valamint a **Keretsugár**, a **Box Shadow** és a **CSS Filters** külön **Normál** és **Rámutatás** fülön | Elrejtés |
| **Reszponzív láthatóság** | Elrejti a widgetet asztali, tablet vagy mobil méreten | Elrejtés |
## Kép görgetése rámutatáskor
Egy teljes oldalas képernyőkép vagy hosszú portfóliódarab nehezen kezelhető egy weboldalon: egészben megmutatva elnyomja az elrendezést, levágva viszont a látogató sosem látja a többit. A **Kép görgetése** egy rövid, rögzített magasságú keretbe teszi a magas képet, és simán végigtolja fentről lefelé, amíg az egér rajta van.
Használj magas képet: az effektnek csak akkor van hová mozognia, ha a kép magasabb, mint a keret. Ideális egy teljes oldalas képernyőkép vagy hosszú makett.
1. Add hozzá a **Kreatív kép** widgetet az oldalhoz.
2. A **Tartalom** fülön válaszd ki a magas képet a **Kép kiválasztása** mezőben. Bármelyik **Kép stílusa** jó.
3. A **Stílus** fülön a **Kép stílusa** szakaszban kapcsold be a **Kép görgetése** kapcsolót.
4. Állítsd a **Minimális magasság** értékét a keret magasságára. Ettől lesz a kép ablak, nem az egész kép.
5. Az **Átmenet időtartama** csúszkával szabályozd, milyen lassan fusson végig.
*A Kép görgetése kapcsoló alatti Minimális magasság és Átmenet időtartama csúszka* (https://minta-bolt.hu/wp-admin/post.php?post=193&action=elementor)
A képen a **Kép görgetése** be van kapcsolva, alatta a **Minimális magasság** és az **Átmenet időtartama** látszik.
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Minimális magasság** | A látható keret magassága képpontban, eszközönként. Legyen alacsonyabb, mint amilyen a kép lenne, különben nincs mit görgetni. Értéke 5 és 1200 között lehet | 400 |
| **Átmenet időtartama** | Hány másodpercig tart a mozgás egy irányban. Értéke 0,1 és 10 között lehet | 2 |
A kép a keretre fedő módban illeszkedik, ezért egy nagyon keskeny kép oldalait a keret szélessége levágja. Azon a szélességen ítéld meg az eredményt, amelyen a widget valójában megjelenik.
### Mit lát a látogató
Nyugalmi állapotban a keret a kép tetejét mutatja. Amíg az egér a kép fölött van, a kép elcsúszik az aljáig, annyi idő alatt, amennyit az **Átmenet időtartama** megad. Az egér elvitelével visszafut a tetejére.
*A keret rámutatás nélkül, a kép tetejével* (https://minta-bolt.hu/km5-gorgetes/)
*A keret rámutatáskor, a kép aljával* (https://minta-bolt.hu/km5-gorgetes/)
Az első képen a keret a kép tetejét mutatja (az első szakasz), a másodikon az egér alatt a kép alja látszik (az ötödik, utolsó szakasz).
### Hogyan viselkedik
- A mozgást a CSS hover vezérli, ezért valódi egérmutató kell hozzá. Érintőképernyőn nincs hover állapot, a keret ott csak a kép tetejét mutatja.
- Az effekt a nyilvános oldalon fut. A szerkesztő a vágott keretet mutatja, de nem mozgatja.
- A **Minimális magasság** reszponzív, ezért tableten és mobilon más magasságot adhatsz.
### Korlátozások
- A kép megszűnik képnek lenni. A **Kép görgetése** CSS-háttérként jeleníti meg a képet, nem `![]()
` címkeként, ezért az alt szöveg nincs az oldalon. Ne használd olyan képhez, amelynek önmagában jelentése van.
- Amíg a **Kép görgetése** be van kapcsolva, a **Képanimáció** nem csinál semmit. Az animáció a képcímkét célozza, de nincs ilyen. A szerkesztő nem figyelmeztet.
- A **Képfelbontás** nem hat, mindig a teljes méretű fájl a háttér.
- Érintőeszközön nincs hover, ezért a mobil látogatók statikus kivágást látnak.
### Hibaelhárítás
**Hoverre sem mozog a kép.** Nézd a nyilvános oldalt, ne a szerkesztőt, és ellenőrizd, hogy a **Minimális magasság** kisebb-e a kép természetes magasságánál az adott tárolóban. Ha az egész kép belefér, nincs mit görgetni.
**A kép oldalai le vannak vágva.** A kép a keretre fedve illeszkedik. Csökkentsd a **Minimális magasság** értékét, szélesítsd a tárolót, vagy feltöltés előtt vágd keskenyebbre a képet.
**Túl gyorsan fut, nem lehet követni.** Növeld az **Átmenet időtartama** értékét. Az alap 2 másodperc, nagyon hosszú képernyőképhez 4 és 6 közötti érték jó.
**Leállt a GSAP képanimációm.** Kapcsold ki a **Kép görgetése** kapcsolót. A kettő nem használható ugyanazon a widgeten.
## Kép maszkolása egyedi alakra
A maszkolás a képet alakzatra vágja a téglalap helyett: egy négyzetes fotóból kör, hatszög vagy bármilyen sziluett lesz. A **Kép alakjának maszkolása** kapcsolóhoz neked kell megadnod az alakzat PNG-jét, amellyel a widget kivágja a képet.
Szükséged van:
- egy képre a **Kép kiválasztása** mezőben,
- egy maszkfájlra: olyan PNG-re, amelynek az alakja tömör, a háttere pedig teljesen átlátszó. Az átlátszó részek lesznek levágva a képről. A widget panelje azt is kéri, hogy .svg fájlt válassz, de PNG-vel is működik.
A maszk arányai hasonlítsanak a képéhez, különben az alakzat megnyúlik vagy eltolódik.
### A maszk alkalmazása
1. Add hozzá a **Kreatív kép** widgetet, és válaszd ki a képet a **Kép kiválasztása** mezőben.
2. A **Kép stílusa** maradjon **Kreatív kép**. A maszkolás a **Görgetéskor felfedett kép** stílusban nem érhető el.
3. A **Stílus** fülön a **Kép stílusa** szakaszban kapcsold be a **Kép alakjának maszkolása** kapcsolót.
4. A **Maszkolt kép** mezőben töltsd fel vagy válaszd ki az alakzatfájlt.
*A maszkolás beállításai a Stílus fülön* (https://minta-bolt.hu/wp-admin/post.php?post=208&action=elementor)
A képen a **Maszkolt kép** mező a csillag alakú fájllal, alatta a **Maszk pozíciója**, a **Maszk ismétlése**, a **Maszk mérete** és a **Kép árnyéka** látszik.
### Az alakzat illesztése a képhez
Három reszponzív legördülő szabályozza, hogyan ül az alakzat a képen. Eszközönként is állíthatod, ha a tároló mobilon más arányú.
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Maszk pozíciója** | Hová kerül az alakzat a képen, a szokásos kilenc rögzítési pont | **Középen középen** |
| **Maszk ismétlése** | Mozaikszerűen ismétlődik-e az alakzat. Egyetlen alakzatnál hagyd az alapértéken, ismétlést csak mintával való maszkoláshoz válassz | **Nincs ismétlés** |
| **Maszk mérete** | Az alakzat méretezése: egyik értéke az egész alakzatot belefoglalja a képbe, a másik addig nagyítja, amíg kitölti a képet, és ilyenkor magát az alakzatot vágja | **Teljes kép megjelenítése** |
Ha a maszk túl kicsi, vagy félrecsúszik, szinte mindig a **Maszk mérete** és a **Maszk pozíciója** a ludas, nem a fájl. Először a kitöltő méretezést próbáld, aztán finomítsd a pozíciót.
### Árnyék az alakzat mögött
A **Kép árnyéka** egyszerű szövegmező, amely nyers CSS árnyékértéket vár: a mezőben példaként `1px 1px 4px rgba(0,0,0,0.75)` látszik. Írj be például `6px 8px 12px rgba(0,0,0,0.55)` értéket, és az árnyék az alakzat körvonalát követi, nem egy téglalapét.
Éppen ezért használd ezt a mezőt a lejjebbi **Box Shadow** helyett, ami téglalapot rajzolna.
*Egy fotó csillag alakúra vágva, lágy árnyékkal* (https://minta-bolt.hu/km5-maszkolas/)
A képen a tájkép csillag alakra van vágva, és az árnyék a csillag körvonalát követi.
### Hogyan viselkedik
- A maszkot CSS alkalmazza, az eredeti képfájl érintetlen marad: a maszkot bármikor cserélheted vagy törölheted, és a teljes kép visszajön.
- Az alakzat a szerkesztőben is megjelenik, nem csak a nyilvános oldalon, így munka közben megítélheted az illeszkedést.
- A maszkolt kép továbbra is valódi `![]()
` címke, ezért az alt szövege az oldalra kerül.
### Korlátozások
- Csak a **Kreatív kép** stílusban működik. Ha a **Kép stílusa** **Görgetéskor felfedett kép**re vált, a maszk nem érvényesül, de a beállítás megmarad, és visszaváltva újra él.
- Az átlátszóság nélküli maszkfájl nem csinál látható hatást: egy tömör téglalap téglalapot maszkol. A PNG-t átlátszó háttérrel exportáld.
- A **Kép árnyéka** nincs ellenőrizve. Közvetlenül a CSS-be kerül, ezért elírás esetén nincs árnyék, és hibaüzenet sem.
- Ne kombináld a maszkolást a **Kép görgetése** effekttel, mert az háttérelemre cseréli a képet, és vele a maszk célpontját is.
### Hibaelhárítás
**A képem még mindig téglalap.** A maszkfájlnak valószínűleg nincs átlátszó területe, vagy JPG. Átlátszó hátterű PNG-t használj, ne fehér hátterűt.
**Az alakzat le van vágva a szélein.** A **Maszk mérete** a kitöltő értéken van, és az alakzatot a kép fölé nagyítja. Állítsd az egész alakzatot megtartó értékre.
**Az alakzat nincs középen.** Állítsd a **Maszk pozíciója** értékét **Középen középen** pontra, és ellenőrizd, hogy a maszkfájl arányai nagyjából egyeznek-e a képével.
**A Kép árnyéka nem csinál semmit.** Az értéknek érvényes CSS árnyék szintaxisnak kell lennie, például `6px 8px 12px rgba(0,0,0,0.55)`. Amit a böngésző nem tud értelmezni, azt csendben eldobja.
**Hiányzik a Kép alakjának maszkolása kapcsoló.** Nézd meg a **Kép stílusa** értékét a **Tartalom** szakaszban. A kapcsoló csak a **Kreatív kép** stílusnál jelenik meg.
## Parallax kép görgetéskor
A parallax kép az oldal többi részétől eltérő sebességgel úszik, ezért a lapos szakasz mélységet kap, ahogy a látogató elhalad mellette. A **Kreatív kép** widget ezt egyetlen kapcsolóval, a **Szuper parallax**szal éri el, plusz egy számmal, hogy mennyit utazzon a kép.
A kép oldalra csúszik a tárolóján belül, ezért széles szakaszban érvényesül jobban, nem keskeny oszlopban. Hagyd a **Kép stílusa** értékét **Kreatív kép**en: a **Szuper parallax** a **Görgetéskor felfedett kép** stílusban nem érhető el.
1. Add hozzá a **Kreatív kép** widgetet az oldalhoz.
2. Válaszd ki a képet a **Kép kiválasztása** mezőben.
3. A **Stílus** fülön a **Kép stílusa** szakaszban kapcsold be a **Szuper parallax** kapcsolót.
4. Állítsd a **Görgetés elmozdítása (X)** értékét arra, mennyit utazzon a kép.
*A Szuper parallax kapcsoló és a Görgetés elmozdítása (X) csúszka* (https://minta-bolt.hu/wp-admin/post.php?post=194&action=elementor)
A képen a **Szuper parallax** be van kapcsolva, alatta a **Görgetés elmozdítása (X)** látszik.
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Szuper parallax** | Bekapcsolja az effektet. Csak a **Kreatív kép** stílusnál érhető el | Elrejtés |
| **Görgetés elmozdítása (X)** | Hány képpontot utazik a kép vízszintesen a teljes görgetés alatt. 40 és 700 között állítható, 4-es lépésekben | 120 |
*A parallax kép a nyilvános oldalon, széles tárolóban* (https://minta-bolt.hu/km5-parallax/)
A mozgás vízszintes, bár görgetésre történik. A kép a megadott értékkel balra tolva indul, és visszacsúszik a nyugalmi helyére, ahogy a szakasz áthalad a nézeten. Alapértéken a kép 120 képponttal balra kezd, 400-nál 400 képponttal, és a sodródás sokkal feltűnőbb.
### Hogyan viselkedik
- Az effekt a nyilvános oldalon fut, a görgetési pozícióhoz kötve. Visszagörgetve fordítva játszódik le.
- A widget a kép második másolatát rajzolja ki a parallax rétegnek. Ez a másolat mindig a teljes méretű fájl, ezért egy nagyon nagy eredeti kétszer terheli a látogatót: feltöltés előtt kicsinyítsd le.
- Amíg a szakasz nem éri el a nézetet, semmi sem mozog, ezért rövid oldalon az effekt alig fut le.
### Korlátozások
- Csak a **Kreatív kép** stílusban érhető el. Ha a **Kép stílusa** **Görgetéskor felfedett kép**re vált, a parallax réteg egyáltalán nem rajzolódik ki, bár a beállítás megmarad.
- Csak vízszintes elmozdulás van. Függőleges mozgáshoz használd a **Mágikus görgetés** kapcsolót ugyanebben a szakaszban.
- Ne kombináld a **Kép görgetése** effekttel: az háttérelemre cseréli a képet, és a két effekt ugyanazért a képért küzd.
### Hibaelhárítás
**Semmi sem mozog görgetéskor.** Ellenőrizd, hogy a **Kép stílusa** **Kreatív kép**-e, és a nyilvános oldalt nézd: az effekt nem fut az Elementor szerkesztőjében.
**A mozgás alig látszik.** Növeld a **Görgetés elmozdítása (X)** értékét. Az alapérték 120 finom, teljes szélességű szakaszon a 300 és 400 közötti érték már jól látszik.
**A kép duplának látszik, vagy ugrik a szélein.** A parallax réteg egy második másolat, amely az első alatt csúszik. Adj a tárolónak elég szélességet, vagy csökkentsd a **Görgetés elmozdítása (X)** értékét, hogy a másolat a látható terület mögött maradjon.
## 3D billentés rámutatáskor
A **3D billentéses parallaxis** kapcsoló a képet az egér felé billenti, így a kép térbeli mélységet kap. Bekapcsolva a **Billentési beállítások** gombbal nyithatod meg a részleteit. Alapértékei: Max 20, Scale 1,1, Speed 400, Transform Perspective 400.
*A kép megbillentve az egér közelében* (https://minta-bolt.hu/km5-kreativ/)
A képen a kép az egér felé billent és kissé nagyobb lett.
## Szegély, árnyék és szűrők
Kapcsold be a **Szegély** kapcsolót, és megkapod a szegély stílusát és szélességét. Az alatta lévő **Normál** és **Rámutatás** fülön állítható a szegély színe, a **Keretsugár**, a **Box Shadow** és a **CSS Filters** (elmosás, fényerő, kontraszt, telítettség, színárnyalat).
A szegély stílusa lehet folytonos, szaggatott, pontozott, barázda, süllyesztett, kiemelkedő vagy domború. A **Keretsugár** a fülek alatt van, nem a szegély szélessége mellett, ezért akkor is érvényesül, ha magát a szegélyt nem kapcsoltad be.
## Reszponzív láthatóság
A **Reszponzív láthatóság** bekapcsolása után asztali, tablet és mobil kapcsolót kapsz. Ha egyet kikapcsolsz, a teljes widget eltűnik azon a méreten.
A három kapcsoló saját, rögzített szélességekkel dolgozik: az asztali 991 képpont fölött, a tablet 601 és 990 képpont között, a mobil 600 képpont alatt érvényes. Nem követik az Elementor töréspontjait. Ezért egy éppen 991 képpont alatti ablak ennek a widgetnek tablet, akkor is, ha az Elementor asztalinak hívja. Ha a widget eltűnik tableten, ellenőrizd ezt.
## További korlátozások
- Az effektek nem halmozódnak tisztán. A **Kép görgetése** háttérelemre cseréli a képet, ezért a **Képanimáció** nem talál mit animálni, és hatástalan marad, ha mindkettő be van kapcsolva.
- A **Kép alakjának maszkolása** és a **Szuper parallax** csendben figyelmen kívül marad a **Görgetéskor felfedett kép** stílusban. A kapcsolók ott el vannak rejtve, de ha előbb állítod be, és utána váltasz stílust, a beállítások megmaradnak, csak hatástalanok.
- Ebben a widgetben nincs Tooltip és Continuous Animation vezérlő. A régebbi változatokban volt, és a régi képernyőképeken még látszanak.