Sorháttér widget: háttérkép, parallax és mozgó képek

A Sorháttér widget a háttérképet mozgásba hozhatja: görgetésre eltolhatja, az egérrel megdöntheti, lassan ráközelíthet, vagy egész képeket gördíthet át a szakaszon. Az alapokat (a widget bekapcsolását és a rétegeket) a Sorháttér widget: áttekintés, rétegek és fedőréteg fejezet írja le. A widget a Pro bővítmény része, és abba a tárolóba kell tenned, amelyik a hátteret kapja.

Parallax háttérkép

A parallax háttér a képet más ütemben mozgatja, mint a tartalmat, ezért görgetéskor mélység érzetét kelti.

1. A Sorháttér widgeten nyisd meg a Tartalom → Mély réteg szakaszt.
2. A Válaszd ki az opciót listában válaszd a Kreatív háttérkép elemet, és a Háttérkép mezőben válaszd ki a képet. Szükség szerint állítsd a Kép pozíciója, Melléklet, Ismétlés és Háttér mérete értékét.
3. A Háttéreffektus maradjon Normál háttérkép értéken. Ha azt szeretnéd, hogy a kép kövesse az egeret, a Különleges képeffektusok rámutatáskor listából válaszd a Parallax dőlési effektus vagy a Parallax mozgási effektus elemet.
4. Kapcsold be a Parallax görgetéskor kapcsolót a görgetéses hatáshoz.
5. Ha szeretnél, kapcsold be a Ken-Burns-effektus kapcsolót a lassú ráközelítéshez, és a Reszponzív kép kapcsolót, hogy táblagépen és telefonon másik képet mutass.

https://minta-bolt.hu/h8-parallax/

A képen a tároló a lap közepére görgetve látszik: a háttérkép a tárolóhoz képest elcsúszik, ez a parallax.

Beállítás	Mit csinál	Alapérték
Melléklet	A Rögzített érték egy helyben tartja a képet, miközben az oldal elhalad előtte.	Görgetés
Háttéreffektus	Normál háttérkép vagy Automatikusan mozgó háttérkép.	Normál háttérkép
Különleges képeffektusok rámutatáskor	Parallax dőlési effektus vagy Parallax mozgási effektus, a Parallax intenzitása értékkel (20 és 100 között).	nincs
Parallax görgetéskor	A képet függőlegesen eltolja, ahogy a tároló áthalad a képernyőn.	Ki
Mágikus görgetés	A képet egy Kezdő pozíció és egy Végső pozíció között mozgatja görgetés közben.	Ki
Ken-Burns-effektus	Lassú ráközelítés; az Effektus iránya Normál vagy váltakozó, az Effektus időtartama (sebesség) másodpercben adható meg.	Ki, 15
Reszponzív kép	Külön kép a Tablet és a Mobil fülön.	Ki

Hogyan viselkedik

• A Parallax görgetéskor bekapcsolva a kép pozíciója nagyjából 35 százalékról 80 százalékra változott felülről lefelé, ahogy a tároló végighaladt a képernyőn.
• Rögzített melléklettel a kép nem mozdul, a tároló pedig ablakként működik rajta.
• A Parallax dőlési effektus megdönti, a Parallax mozgási effektus eltolja a képet az egér mozgásával. Ha az egér elhagyja a területet, a kép nagyjából három másodperc alatt visszaáll.
• 6 másodperces időtartammal a Ken-Burns-effektus a képet nagyjából 127 százalékra nagyította, majd újraindult.
• Reszponzív kép esetén az 1024 pixeles képernyő még az asztali képet, a 800 és a 767 pixeles a táblagépes, a 390 pixeles a mobilos képet mutatta.
• A Mágikus görgetés csak azután mozgatja a képet, hogy a tároló teteje átlépte a képernyő közepét. Az oldal tetején lévő tároló már az oldal megnyitásakor túl van ezen.

Korlátozás

A Mágikus görgetés a megadott távolságnak csak a felét mozgatja, ellenkező irányba: a Végső pozíció Y értéke −50 volt, és a kép 25 pixelt mozdult lefelé.

Hibaelhárítás

A Mágikus görgetés nem csinál semmit. A tároló valószínűleg az oldal tetején van. A mozgás addig fut, amíg a tároló a képernyő közepén halad át, ezért az oldal lejjebb lévő szakaszain látszik jól.

Önmagától mozgó képek

Egy lassan átgördülő háttérkép mozgást ad a szakasznak videó nélkül. A Sorháttér egy vagy több képet is végtelenül mozgathat, a megadott irányba és sebességgel.

1. A Sorháttér widgeten nyisd meg a Tartalom → Középső réteg szakaszt.
2. A Válaszd ki az opciót listában válaszd az Automatikusan mozgó réteg elemet.
3. Nyisd ki az első elemet, a Kép feltöltése mezőben válaszd ki a képet, és állítsd be a Háttér mérete értékét.
4. Válassz Irányt (Jobb, Bal, Felül vagy Alul), majd állítsd be a Kép átlátszatlanságát és az Átmenet sebességét.
5. Az Elem hozzáadása gombbal vegyél fel további mozgó képeket. A felső képeknek adj 1-nél kisebb átlátszatlanságot, hogy az alattuk lévők is látsszanak.

https://minta-bolt.hu/h8-mozgo/

A képen a piros kör és a kék háromszög két külön mozgó elem: a háromszög félig átlátszó, ezért az alatta lévő kép áttűnik rajta.

Egyetlen háttérképet a Mély rétegből is mozgathatsz: válaszd a Kreatív háttérkép elemet, a Háttéreffektus legyen Automatikusan mozgó háttérkép, majd válaszd ki a Mozgás irányát és az Átmenet sebességét.

Beállítás	Mit csinál	Alapérték
Irány	A mozgás iránya: Jobb jobbra, Felül a tetejétől lefelé viszi a képet.	Nincs (balra mozog)
Kép átlátszatlansága	A kép átlátszósága, 0 és 1 között.	nincs
Átmenet sebessége	Minél nagyobb az érték, annál gyorsabb a mozgás (−100 és 100 között).	üres (a leglassabb pozitív sebesség)
Reszponzív láthatóság	Asztali gép, Tablet és Mobil kapcsoló az elemhez.	Ki

Hogyan viselkedik

• A kép ismétlődik, és megállás nélkül, egyszerre egy pixelt mozdul.
• Az 50-es sebesség a képet 2,5 másodperc alatt nagyjából 50 pixelre, a 90-es nagyjából 260 pixelre mozgatta, az üres sebesség pedig nagyjából 26 pixelre.
• Több elem egymástól függetlenül mozog, mindegyik a saját irányába és sebességével.

Korlátozások

• A Reszponzív láthatóság nem rejti el az Automatikusan mozgó réteg képeit: kikapcsolt asztali és mobil kapcsolóval a kép 1200, 800 és 390 pixelen is látszott.
• A 0 alatti Átmenet sebessége lassít, nem fordítja meg a mozgást. Az irányt az Irány listával változtasd.

Hibaelhárítás

A kép rossz irányba mozog. Állítsd be kifejezetten az Irányt: a Nincs érték balra mozgatja a képet.

Csak a legfelső kép látszik. Csökkentsd a fölötte lévő elemek Kép átlátszatlanságát, hogy az alsók áttűnjenek.

Görgetésre mozduló képek

Ha a háttérben a képek a görgetéssel különböző ütemben vándorolnak, halványulnak vagy forognak, az oldal rétegzett és élő hatású. A Sorháttér a parallax háttérképet extra képekkel kombinálja, amelyek görgetéskor mozognak.

1. Add hozzá a Sorháttér widgetet a tárolóhoz. A Tartalom → Mély réteg szakaszban válaszd a Kreatív háttérkép elemet, adj meg egy Háttérképet, és kapcsold be a Parallax görgetéskor kapcsolót.
2. Nyisd meg a Középső réteg szakaszt, és válaszd a Modern képeffektus elemet.
3. Nyisd ki az első elemet, és a Kép feltöltése mezőben válaszd ki a képet.
4. Az asztali fülön helyezd el a képet: például kapcsold be a Jobb (automatikus / %) értéket 5-tel, a Fent (automatikus / %) értéket 15-tel, és add meg 350 pixeles Szélességet. Ha szeretnél, válassz animációt a Képeffektusok listából.
5. Kapcsold be a Mágikus görgetés kapcsolót. A Görgetési opciók mellett a ceruzára kattintva állítsd be az Eltolást és az Időtartamot, majd a Kezdeti és Végső fülön a kezdő és a végpontot.

https://minta-bolt.hu/h8-gorgetes-effekt/

A képen a lebegő piros kör a Modern képeffektus eleme: görgetéskor eltolódik, miközben a háttérkép a parallax szerint mozog.

Az Elem hozzáadása gombbal további képeket vehetsz fel, mindegyiknek külön pozícióval és görgetési beállítással.

Hogyan viselkedik

• A Mágikus görgetés akkor indul, amikor a tároló teteje eléri a képernyő közepét, és az Időtartam értékének megfelelő pixelnyi görgetésen át fut (alapérték 300). Visszagörgetve fordítva játszódik le.
• −200-as Végső pozíció (Y), 0,3-es átlátszatlanság és 600-as Időtartam mellett a kép nagyjából 100 pixelt mozdult lefelé, és 30 százalékra halványult, miközben az oldal 600 pixelt görgetett.
• A Képeffektusok (Pulzálás, Lebegtetés, Dobálás, Forgó) görgetéstől függetlenül folyamatosan futnak, az Időtartam pedig a sebességüket adja (alapérték 2,5 másodperc).

Korlátozások

• A Mágikus görgetés a megadott távolság felét mozgatja, az ellenkező irányba (−200 mellett a kép 100 pixelt mozdult lefelé).
• Az oldal tetején lévő tároló az oldal megnyitásakor már túl van a képernyő közepén, ezért a Mágikus görgetése látható mozgást nem ad.
• A Forgó effektus Transzformáció origója nincs hatással: a kép mindig a közepe körül forog.
• A Reszponzív láthatóság Mobil kapcsolójának kikapcsolása nem rejtette el a képet a 390 pixeles képernyőn (a Tablet kikapcsolása 800 pixelen elrejtette).

Hibaelhárítás

A kép nem mozdul görgetéskor. Tedd lejjebb a szakaszt az oldalon, vagy növeld az Időtartamot, hogy a hatás hosszabb görgetésen át fusson.