MagyarmagyarSVG-szűrőeffektusok, SVG-képmaszk és SVG torzítás
Képek átalakítása SVG-vel: szűrők, maszkok, torzítás, és a Forrás szakasz, amellyel a hatás más elemekre is rákerül.
Ez a három widget egy képet alakít át SVG-vel. Mindhárom a közös SVG-alapokra épül: a Viewbox és a Stílus (Igazítás: Bal, Középre, Jobb) szakaszuk ugyanaz, lásd SVG alapok.
SVG-szűrőeffektusok
Szekció neve “SVG-szűrőeffektusok”A widget a kép képpontjait valós időben alakítja át SVG-szűrők segítségével. A Típus listából választasz szűrőt, a Kép mezőben adod meg az átalakítandó képet.
A képen a Kéttónusú típus látszik két kitöltőszínnel. A Beállítások alatti mezők a kiválasztott típustól függnek.
| Típus | Mit csinál | Beállításai |
|---|---|---|
| Kéttónusú | A képet két színre redukálja. | Kitöltőszín 1, Kitöltőszín 2 |
| Törött | „Törési” hatást ad a képnek. | Törés mérete |
| Kacskaringós | Hullámzó, fodrozódó átalakítás. | Kacskaringós alapfrekvencia, Kacskaringós numOctaves, Típus (FractalNoise vagy Turbulence), Kacskaringó mérete, Kacskaringó kezdőértéke |
| Vázlatkeret | Vázlatot készít a képből, kerettel körülvéve. | Vázlat körvonala, Vázlat X, Vázlat Y, Vázlat mérete, Keret színe |
| Glitch | A képpontokat RGB-összetevőikre bontja, enyhe animációval. | Képpont mérete, Képhiba mérete |
| Röntgensugarak | A kép úgy néz ki, mintha röntgenfelvétel lenne. | nincs |
| Morfológia | A kép vonalait vastagítja vagy vékonyítja. | Dilatálás vagy erózió, Morfológiai sugár |
| Poszterizálás | Egyszerűsíti az árnyalatok folyamatát, stilizált hatást ad. | Piros, Zöld, Kék, Színek eltávolítása |
| RGB-eltolás | A színcsatornákat eltolja egymáshoz képest. | nincs |
| Pixelesítés | Pixelessé teszi a képet. | nincs |
A Nincs típus a képet változatlanul hagyja.
SVG-képmaszk
Szekció neve “SVG-képmaszk”A widget SVG-vel maszkot tesz a képre: a kép egy részét elrejti, és csak a maszk alakjának megfelelő részt mutatja. Használhatod arra is, hogy az alap enyhén átlátszódjon, PNG nélkül.
A Képmaszk szakaszban a Kép mezőben adod meg a maszkolandó képet, a Maszk alatti Típus listából az alakzatot. A képen a Gyűrű típus látszik a hozzá tartozó A belső kör sugara beállítással.
| Maszktípus | Beállítása |
|---|---|
| Kép | Egy másik képpel maszkolsz: ez a legérdekesebb típusok egyike. A maszkoló képet a Kép mezőben adod meg. |
| Gyűrű | A belső kör sugara |
| Háromszög, Kör, Hatszög, ötszög, Rombusz, Csillag, Szív | nincs külön beállítás |
| Egyéni útvonal | Egyéni útvonal (számok): az alakzat útvonal-adata, lásd SVG alapok |
SVG torzítás
Szekció neve “SVG torzítás”Az SVG torzítás az SVG-szűrő eltolástérképével torzítja a képet. A hatás erősségét a Mélységi tényező adja meg.
Az Eseményindító határozza meg, mikor jelenjen meg a hatás:
| Eseményindító | Mit csinál |
|---|---|
| Statikus | Átmenet nélkül alkalmazza a torzítást. |
| Animáció | Ismétlődően létrehozza a hatást. |
| Rámutatás | A hatás akkor jön létre, amikor a kurzor az elem fölé ér. |
| Görgetés | Az animáció akkor indul, amikor az elem a görgetéssel látható lesz. |
A képen az Animáció szakasz látszik. Az eseményindítótól függően ezek a mezők jelennek meg:
| Beállítás | Mit csinál | Mikor látszik |
|---|---|---|
| Animációs vezérlők | Lejátszás és Szüneteltetés gombok | Animáció |
| Link célja | Nincs, Kezdőlap URL vagy Egyéni URL: hova vigyen a kattintás | Rámutatás |
| Sebesség, Késleltetés | Az animáció sebessége és késleltetése | minden animált típusnál |
| Easing, Egyenlet | A gyorsulás típusa (Alapértelmezett, Nincs, Be, Ki, InOut) és görbéje (Lineáris, Power1 … Power4, SlowMo, Vissza, Elastic, Pattogás, Circ, Expo, Szinusz) | minden animált típusnál |
| Alapkép | Az eredeti kép | mindig |
| Eltolástérkép képe és Eltolástérkép | A torzítást meghatározó eltolástérkép | mindig |
| Mélységi tényező, Méretezés (%) | A torzítás erőssége és mérete | mindig |
| Mélységfaktor: végérték, Méretezés: végérték (%) | Az animáció végén elért érték | Rámutatás, Görgetés |
| Véletlenszerű animáció | Véletlenszerű animáció | Animáció |
| Képarány, Aránymód | A képarány, és hogy a kép Vágás vagy Megtartás szerint illeszkedjen | mindig |
A Forrás szakasz: a hatás más elemekre
Szekció neve “A Forrás szakasz: a hatás más elemekre”Az SVG-szűrőeffektusok, az SVG-képmaszk és az SVG torzítás Forrás szakaszában a Kimenet kapcsolóval bekapcsolhatod az osztálykimenet funkciót. Ekkor a widget nem jelenik meg önállóan (a szakasz szövege szerint a szűrőeffektusokat csak más oldalelemekre való alkalmazáshoz használd), hanem egy CSS-osztályt kínál, amelyet bármelyik másik elemre ráírhatsz, és az elem megkapja a hatást.
A hatás ráírása a célelemre:
- Kapcsold be a Kimenet kapcsolót az SVG-widget Forrás szakaszában.
- Másold ki a widget által megadott osztálynevet.
- Jelöld ki a célelemet, és a Haladó fülön írd be az osztálynevet a CSS-osztályok mezőbe.
Tudnivalók:
- A forrás csak Statikus eseményindítóval használható, animációval, rámutatással vagy görgetéssel nem.
- A legjobb eredményt ezekkel az Elementor-alapwidgetekkel adja: Kép, Címsor, Ikon, Gomb.
- A böngészők támogatása: Firefoxban teljes, Chrome-ban, Safariban és Edge-ben részleges.
Készült: