# Parallax és Billentés widget

> Egérrel vagy eszközdöntéssel mozgó, mélységet adó képrétegek, és sablonra alkalmazható rámutatásos billentő hatás.

Ez a fejezet két mélységhatású widgetet ír le: a **Parallax** több képréteget mozgat az egér vagy az eszköz mozgása szerint, a **Billentés** egy Elementor-sablont dönt meg rámutatáskor.

## Parallax

A **Parallax** widget képeit az egér mozgása (vagy a telefon, táblagép giroszkópja) mozgatja, a rétegek eltérő mértékben, így mélységérzet jön létre. A widgetnek két szakasza van a **Tartalom** fülön: a **Parallax** a mozgás működését, a **Parallax elemek** a rétegeket adja meg.

![A Parallax szakasz beállításai](./kepek/animaciok-es-effektek-parallax.webp)

*A Parallax szakasz beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

### A mozgás beállításai

A legtöbb beállításnál külön van **X** és **Y** érték a két tengelyhez.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Relatív bemenet** | Bekapcsolva az egér mozgása a jelenetelem pozíciójához képest számít. Giroszkópnál nincs hatása. | Nem |
| **Relatív bemenet korlátozása** | Bekapcsolva a mozgás megáll, amint a kurzor eléri a jelenetelem szélét. Giroszkópnál nincs hatása. | Nem |
| **Csak rámutatáskor** | Bekapcsolva a parallax csak akkor működik, amíg a kurzor a jelenetelem fölött van; egyébként a rétegek visszaállnak a kiindulópozíciójukba. | Nem |
| **Bemeneti elem** | Másik elem használata a kurzorbemenethez. CSS-választót kell megadni. Csak a **Relatív bemenet** bekapcsolásával együtt működik, és ilyenkor érdemes a **Csak rámutatáskor** értéket is bekapcsolni. Giroszkópnál nincs hatása. | #myinput |
| **X kalibrálása**, **Y kalibrálása** | Bekapcsolva az induláskor mért tengelyérték tárolódik, és a mozgás ehhez képest számolódik. Csak giroszkópnál van hatása, kurzornál nincs. | Nem |
| **X invertálása**, **Y invertálása** | Megfordítja a rétegek mozgásirányát a bemenethez képest. Ha mindkettő ki van kapcsolva, a rétegek az eszköz vagy a kurzor mozgásával együtt mozognak. | Nem |
| **X korlátozása**, **Y korlátozása** | A rétegek mozgásának határa a megfelelő tengelyen. Kikapcsolt (hamis) értéknél a mozgás teljesen szabad. | 100 |
| **X skálázási tényező**, **Y skálázási tényező** | A bemeneti mozgást szorozza ezzel az értékkel, így nő vagy csökken a mozgás sebessége és tartománya. | X: 2, Y: 8 |
| **X súrlódása**, **Y súrlódása** | A rétegekre ható súrlódás. Az 1 értéknél a rétegek azonnal az új helyükre ugranak, ennél kisebb értéknél finoman lassulnak. Az alapérték sima mozgást ad; próbálkozhatsz 0,15 vagy 0,075 értékkel. | 0,1 |
| **X origója**, **Y origója** | Az egérbemenet origója. A 0,5 a képernyő vagy elem közepe, a 0 a bal (X) vagy felső (Y) szél, az 1 a jobb vagy alsó szél. Giroszkópnál nincs hatása. | 0,5 |
| **Mutatóesemények** | Bekapcsolva a jelenetelemekkel és a rétegekkel is lehet interakcióba lépni. Kikapcsolva a bővítmény a teljesítmény miatt `pointer-events: none` CSS-szabályt alkalmaz. Bekapcsolva sem elég ahhoz, hogy minden réteggel lehessen interakcióba lépni, mert a rétegek átfedik egymást: vagy minden réteg gyerekelemére `position: absolute` kell, vagy a beállítást kikapcsolva kell hagyni, és csak az interaktív elemekre kell `pointer-events: all` értéket adni. | Nem |

### Parallax elemek

Itt adod meg a rétegeket.

![A Parallax elemek szakasz](./kepek/animaciok-es-effektek-parallax-elemek.webp)

*A Parallax elemek szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Alapértelmezett mélységi tényező** | A rétegek közti mélységet adja meg 0 és 1 közötti értékkel. Csak akkor használja a widget, ha az adott réteg saját mélységi tényezője 0. | 0,2 |
| **Tételek** | Itt adod hozzá a képeket az **Elem hozzáadása** gombbal. Amíg nem adsz hozzá képet, egy alakzat jelenik meg. | |

## Billentés

A **Billentés** widget egy Elementor-sablonra tesz parallax hatású billentést rámutatáskor: a sablon az egér pozíciója szerint megdől, mintha 3D-ben követné a kurzort.

1. Hozz létre egy sablont a **Sablonok → Új hozzáadása** menüben. Lehet egyszerű, csak egy képet tartalmazó sablon, vagy összetettebb, többféle tartalommal.
2. Tedd az oldalra a **Billentés** widgetet.
3. A **Sablonminta kiválasztása** mezőben válaszd ki az előbb elkészített (vagy egy meglévő) sablont.
4. Állítsd be a hatást az alábbi beállításokkal.

![A Billentés widget beállításai](./kepek/animaciok-es-effektek-billentes.webp)

*A Billentés widget beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Sablonminta kiválasztása** | A megbillenő sablon. | |
| **Eltolás Z** | A sablon Z irányú (a nézőhöz közeledő vagy attól távolodó) eltolása. | 0 |
| **Maximális billentés** | A legnagyobb dőlésszög. | 5 |
| **Perspektíva** | A 3D-hatás perspektívája. | 1000 |
| **Méretezés** | A sablon nagyítása rámutatáskor. | 1 |
| **Sebesség** | A billenési és visszaállási animáció sebessége ezredmásodpercben. | 300 |
| **Átmenet** | Átmenetet ad a mozgáshoz. | Igen |
| **Alaphelyzetbe állítás** | Bekapcsolva az elem a kurzor távozásakor visszabillen az eredeti helyzetébe. | Igen |
| **Csillogás** | Áttetsző, csillogó fényeffektust ad az elemre. | Nem |
| **Maximális csillogás** | A csillogás legnagyobb erőssége. | 1 |