MagyarmagyarParallax é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
Szekció neve “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 mozgás beállításai
Szekció neve “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
Szekció neve “Parallax elemek”Itt adod meg a rétegeket.
| 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
Szekció neve “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.
- 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.
- Tedd az oldalra a Billentés widgetet.
- A Sablonminta kiválasztása mezőben válaszd ki az előbb elkészített (vagy egy meglévő) sablont.
- Állítsd be a hatást az alábbi beállításokkal.
| 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 |
Készült: