# Háttér-Canvas és képtorzítás rámutatáskor

> WebGL-alapú effektek: shaderek a képen és torzító átmenet, amikor a kurzor a kép fölé ér.

Mindkét widget WebGL-technológiát használ, és vászon (canvas) objektumon dolgozik. A háttérben a Three.js egy háromdimenziós környezetet hoz létre, amelyben egy, a kamerára merőleges sík jelenik meg a képpel textúraként. Az átalakításokat shaderek számolják.

## Háttér-Canvas

A **Háttér-Canvas** widget egy képet jelenít meg, és utófeldolgozó effektekkel (shaderekkel) alakítja át. A **Kép** szakaszban adod meg a képet és a **Magasságot** (alapértéke 400 px).

![A Háttér-Canvas widget Kép szakasza](./kepek/animaciok-es-effektek-vaszon.webp)

*A Háttér-Canvas widget Kép szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

Az **Utófeldolgozás és shaderek** szakaszban hat effekt kapcsolója van. Mindegyiket külön be- és kikapcsolhatod, és bekapcsolás után megjelennek a saját beállításai.

![Az Utófeldolgozás és shaderek szakasz bekapcsolt Raszterpontozással](./kepek/animaciok-es-effektek-vaszon-shaderek.webp)

*Az Utófeldolgozás és shaderek szakasz bekapcsolt Raszterpontozással* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A képen a **Raszterpontozás** be van kapcsolva, ezért látszik a **Forma**, a **Szürkeárnyalat** és a **Pont sugara**.

| Effekt | Mit csinál | Beállításai |
| --- | --- | --- |
| **Film** | Vízszintes, vibráló vonalak, mint egy régi televízión. | **Szürkeárnyalat**, **Zaj intenzitása**, **Pásztavonalak intenzitása**, **Pásztavonalak száma** |
| **Raszterpontozás** | A nyomtatott papír raszterezését utánozza. | **Forma** (**Pontok**, **Ellipszis**, **Sorok**, **Négyzet**), **Szürkeárnyalat**, **Pont sugara** |
| **RGB Shift Shader** | Az RGB-csatornák eltolódása. | **Összeg** |
| **Glitch** | Kreatív torzítás. | nincs |
| **Pont** | Régi stílusú fekete-fehér raszterezés. | **Pont mérete**, **Pont szöge** |
| **Pixelek** | Alacsony felbontású kép hatása. | **Pixelek mérete** |

## Képtorzítás rámutatáskor

A **Képtorzítás rámutatáskor** widget két képet jelenít meg. Amikor a kurzor a sík fölé ér, torzító átmenet játszódik le az első kép és a második kép között.

![A Képtorzítás rámutatáskor widget Torzítási effektus választója](./kepek/animaciok-es-effektek-kepek-torzitas.webp)

*A Képtorzítás rámutatáskor widget Torzítási effektus választója* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

### Effektek

A **Torzítási effektus** mezőben előnézeti képek közül választasz. Az effektek típusai: Drip, **Hullám**, **Gyűrű**, **Vízszintes eltolás**, **Függőleges elmozdulás**, **Elmozdulás** (eltolástérkép alapján), **felosztás**, **Fújás**, valamint a **Displacement 1 … 19** és **Displacement Custom** eltolástérképek.

Az effekt hatását ezek a beállítások módosítják (az effekttől függően jelennek meg):

| Beállítás | Melyik effektnél |
| --- | --- |
| **Szélesség** | Drip, **Hullám**, **Gyűrű** |
| **Sugár** | **Gyűrű** |
| **ScaleX**, **ScaleY** | Drip |
| **Intenzitás** | **Függőleges elmozdulás**, eltolástérkép, **felosztás**, **Fújás** |

### Átmenet két kép között

| Beállítás | Mit csinál |
| --- | --- |
| **Előtte lévő kép** | Az alapkép. |
| **Utókép** | A kép, amelyre az átmenet vált. |
| **Képfelbontás** | A képek felbontása. Ne vidd túlzásba a képpontok számával. |
| **Sebesség** | Az átmenet sebessége (alapérték 1,6). |
| **Easing** | A gyorsulás típusa: **Nincs**, **Be**, **Ki**, **InOut** (alapérték: **InOut**). |
| **Link célja** | **Nincs**, **Kezdőlap URL** vagy **Egyéni URL**. |

### Eltolástérkép

Az eltolástérképes effektekhez eltolástérkép kell: egy kép, amely alapján az effekt számolódik. Választhatsz az előre megadott listából, vagy a **Displacement Custom** választásával saját képet tölthetsz fel.

### Stílus

A **Stílus** fülön a Kép widgethez hasonló beállítások vannak: **Igazítás**, **Magasság**, **Szélesség**, **Szegély típusa**, **Keretsugár**, **Padding**, **Dobozárnyék**.