MagyarmagyarParallaxis 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
Szekció neve “A kiterjesztés bekapcsolása”- Nyisd meg a Crocoblock → JetPlugins Settings oldalt, és a JetElements csoport Widgets & Extensions aloldalát.
- Az Elérhető kiterjesztések blokkban kapcsold be a Szakaszparallaxis-kiterjesztés kapcsolót.
Parallaxis hozzáadása
Szekció neve “Parallaxis hozzáadása”- Szerkeszd az oldalt az Elementorral, és kattints a + gombra új konténer hozzáadásához.
- Válaszd ki az elrendezést (Flexbox vagy Rács), majd a szerkezetet.
- 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.
- 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.
- 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.
- 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.
Az Elem hozzáadása gomb új réteget hoz létre.
Egy réteg beállításai
Szekció neve “Egy réteg beállításai”
| 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
Szekció neve “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.
Készült: