Kreatív kép: görgetés egérrel, maszkolás, parallax és további effektek

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 írja 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.

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.

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

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 <img> 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.

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.

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 <img> 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épre 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 parallaxszal é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épen: 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.

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

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épre 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.

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.