# Parallaxis hatás

> Szakaszparallaxis: háttérrétegek különböző sebességgel és irányban mozognak görgetéskor vagy egérmozgásra.

A parallaxis mélység érzetét kelti a háttérben: a kép rétegei eltérő sebességgel és irányban mozognak. A JetElements ezt a konténerekhez adja hozzá a **Szakaszparallaxis** résszel. Elérhető hatások: vízszintes és függőleges parallaxis, egérmozgás, görgetéses nagyítás, forgatás, elmosás és átlátszóság, valamint 3D-effekt.

## A kiterjesztés bekapcsolása

1. Nyisd meg a **Crocoblock → JetPlugins Settings** oldalt, és a **JetElements** csoport **Widgets & Extensions** aloldalát.
2. Az **Elérhető kiterjesztések** blokkban kapcsold be a **Szakaszparallaxis-kiterjesztés** kapcsolót.

## Parallaxis hozzáadása

1. Szerkeszd az oldalt az Elementorral, és kattints a **+** gombra új konténer hozzáadásához.
2. Válaszd ki az elrendezést (**Flexbox** vagy **Rács**), majd a szerkezetet.
3. A konténer **Elrendezés** fülén a **Tartalom szélessége** legyen teljes szélességű, a **Min magasság** pedig például **100vh**.
4. A **Stílus** fülön a **Háttér típusa** legyen **Klasszikus** (az ecset ikon), majd a **Kép** mezőnél válaszd ki a háttérképet a feltöltések közül vagy a médiatárból.
5. A megjelenő beállításoknál a pozíció legyen **Közép Közép**, az ismétlés **Nincs ismétlés**, a méret **Kitöltés**. Így a kép kitölti a szakaszt. Ha a kép homályos, használj nagyobb felbontásút.
6. Térj vissza az **Elrendezés** fülre, nyisd le a **Szakaszparallaxis** részt, és kattints az **Elem hozzáadása** gombra. Annyi réteget adhatsz hozzá, amennyit szeretnél.

![A konténer Szakaszparallaxis része rétegek nélkül](./kepek/parallax-szekcio.webp)

*A konténer Szakaszparallaxis része rétegek nélkül* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=elementor)

Az **Elem hozzáadása** gomb új réteget hoz létre.

## Egy réteg beállításai

![Egy parallaxisréteg beállításai](./kepek/parallax-elem.webp)

*Egy parallaxisréteg beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=elementor)

| Beállítás | Mit csinál |
| --- | --- |
| **Kép** | A réteg képe, amely a háttérkép fölött mozog |
| **Parallaxis sebessége (%)** | A réteg mozgásának sebessége. Minél nagyobb, annál gyorsabban és feltűnőbben mozog. Értéke 100 fölött is lehet |
| **Parallaxis típusa** | A hatás típusa (lásd lent) |
| **Irány** | A hatás iránya: **Down / To Right** vagy **Up / To Left** |
| **Z-Index** | A réteg sorrendje. Átfedésnél a nagyobb Z-index kerül felülre |
| **Háttér X-pozíció (%)** | A réteg vízszintes helye a háttérképhez képest. Lehet 100 fölötti vagy negatív érték is |
| **Háttér Y-pozíció (%)** | A réteg függőleges helye a háttérképhez képest. Lehet 100 fölötti vagy negatív érték is |
| **Háttér mérete** | **Automatikus**: eredeti méret. **Kitöltés**: kitölti a szakaszt, akár vágással. **Teljes kép megjelenítése**: a kép egészében látszik, az arány megmarad |
| **Animációs tulajdonság** | **Háttér pozíciója**: ha a kép a teljes hátteret kitölti. **Átalakítás**: kisebb elemekhez. **3D transzformáció**: az **Egérmozgás** típussal együtt 3D-hatást ad |
| **Engedélyezés eszközön** | Megadja, melyik eszközökön (például **Desktop**, **Táblagép portré**, **Mobile Portrait**) működjön a réteg |

## Parallaxis típusok

A **Parallaxis típusa** mezőben ezek közül választhatsz:

- **Nincs**: a réteg képe nem mozog.
- **Függőleges görgetés**: a kép görgetéskor függőlegesen mozog, a háttérképtől eltérő sebességgel. Az **Irány**: **Down / To Right** vagy **Up / To Left**.
- **Vízszintes görgetés**: a kép görgetéskor vízszintesen mozog. Az irány itt is választható.
- **Egérmozgás**: a kép az egér mozgásával ellentétes irányba mozdul. Ha az **Animációs tulajdonság** **3D transzformáció**, a kép el is fordul, így 3D-objektum hatását kelti.
- **Görgetéses nagyítás**: lefelé görgetve a kép nagyobb lesz. Ehhez nagy felbontású kép kell.
- **Görgetéses forgatás**: a kép a szakasz közepe körül forog. Az irány választható.
- **Görgetéses elmosás**: görgetés közben a kép élessége változik. Az **Előtűnés** irány: kezdetben éles, görgetve egyre homályosabb. Az **Elhalványulás** irány fordítva: egyre élesebb lesz.
- **Görgetéses átlátszóság**: görgetés közben a kép átlátszósága változik. Az **Előtűnés** a képet fentről lefelé egyre kevésbé láthatóvá teszi, az **Elhalványulás** kezdetben átlátszóvá, majd egyre láthatóbbá.

A hatások kombinálhatók: több réteget is hozzáadhatsz különböző típussal.