MagyarmagyarGörgetési sorozat widget: áttekintés és Apple-stílusú képanimáció
Állóképek sorozata, amely a görgetésre lép előre: a widget beállításai, az animáció összeállítása és a leggyakoribb hibák.
A Görgetési sorozat widget számozott állóképeket játszik le egymás után, miközben a látogató görget. A kép így a görgetés ütemében „megelevenedik”: a termék forog, kinyílik vagy kigyullad, videó nélkül és kód nélkül. Ilyen animációt használnak a nagy gyártók termékoldalai.
A widget a Pro bővítmény része. A The Plus Addons → Widgets oldalon keress rá a Scroll Sequence névre, és kapcsold be. Ha a Pro bővítmény ki van kapcsolva, a widget kimenete teljesen eltűnik az oldalról.
Mire van szükséged
Szekció neve “Mire van szükséged”- Képkockákra, egy kép egy képkocka. A widget JPG, PNG és WebP formátumot ismer. Több képkocka simább animációt, de nehezebb oldalt jelent; a gyakorlatban 30 és 60 közötti darabszám jó.
- Görgetési távolságra. A sorozatot a szakasz vagy tároló magassága hajtja. Ha ez a terület alacsony, adj neki Min magasságot, különben nincs mit végiggörgetni.
Képkockák előállítása
Szekció neve “Képkockák előállítása”Indulj magából az animációból: egy forgatott modellből, egy képernyőfelvételből vagy egy rövid termékvideóból, és exportáld számozott állóképekként. Ha csak videófájlod van, előbb bontsd képekre (lásd a távoli szerverről betöltött sorozatok fejezetét).
Tartsd azonos méretűre és képarányúra a képkockákat, és tömörítsd őket. Negyven, egyenként 100 KB-os képkocka 4 MB, amit a látogatónak le kell töltenie.
Sorozat összeállítása
Szekció neve “Sorozat összeállítása”- Adj az oldalhoz egy szakaszt vagy tárolót, és húzd bele a Görgetési sorozat widgetet.
- A Tartalom fül Görgetési sorozat szakaszában az Alkalmazás erre mezőt hagyd Alapértelmezetten, így a képkockák az egész szakaszt kitöltik.
- Kevés képkockánál a Feltöltés típusa maradjon Galéria, és a Képfeltöltés mezőben válaszd ki őket a médiatárból. A sorrend a galériában a lejátszási sorrend. Hosszú sorozatnál válaszd a Távoli szerver lehetőséget.
- Adj a szakasznak görgetési helyet. Tárolónál állítsd be az Elrendezés alatt a Min magasságot; régi Elementor-szakasznál a Magasság legyen Min magasság, és adj meg egy értéket.
A képen az Alkalmazás erre, a Feltöltés típusa és a Képfeltöltés mező látszik, a galériában a kiválasztott képkockákkal.
Szöveget kétféleképpen tehetsz az animáció fölé. A Rögzített szakaszok egy widgetet tart a képkockák fölött két képkockaszám között (lásd a rögzített szakaszok fejezetét). Egyszerűbb esetben tedd a többi widgetet ugyanabba a szakaszba: azok szokásosan görögnek, miközben a képkockák mögöttük lejátszódnak.
A widget beállításai
Szekció neve “A widget beállításai”Alkalmazás erre
Szekció neve “Alkalmazás erre”Ez dönti el, melyik elem fölé rajzolódnak a képkockák.
| Beállítás | Mit csinál |
|---|---|
| Alapértelmezett | A widgetet tartalmazó szakasz vagy tároló teljes területét kitölti. A legtöbb oldalhoz ez való. |
| Törzs | A képkockák az egész oldal mögé kerülnek. Lásd a törzsre és oszlopra alkalmazott sorozat fejezetet. |
| Belső oszlop | Egy szakasz egyetlen oszlopára szánt mód. A korlátozásokat lásd lent és a fent hivatkozott fejezetben. |
Feltöltés típusa
Szekció neve “Feltöltés típusa”A Galéria a WordPress médiatárából veszi a képkockákat: a Képfeltöltés mezőre kattintva jelöld ki őket. A Távoli szerver egy máshol tárolt mappából építi fel a képkockák címét, így több száz fájl nem terheli a médiatárat. Ehhez a Mappa elérési útvonala, az Előtag, a Számjegy, a Kép típusa és a Képek száma mezők tartoznak (részletek a távoli szerveres fejezetben).
Egyéb opció
Szekció neve “Egyéb opció”| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Kép előtöltése (%) | Azt hivatott szabályozni, a képkockák mekkora részét tölti le a böngésző a sorozat indulása előtt. A kipróbálásnál nem változtatta meg, hány képkockát kért le az első betöltéskor. | 20 |
| Rögzített szakaszok | Más widgeteket tart a képkockák fölött két képkockaszám között. Soronként Szakasz ID, Indítás, Vége, Fent (%), Animáció indítása és Animáció befejezése adható meg. | Elrejtés |
Stílus fül
Szekció neve “Stílus fül”| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Pozíció | Egyéni pozíciót kapcsol be, amelynél a Fent (%) és a Bal (%) is 0 és 100% között adható meg | Alapértelmezett |
| Z-Index | A képkockák rétegsorrendje az oldal többi elemétől függően, -10 és 10 között | 0 |
| Szélesség / Magasság | A rajzterület mérete képpontban vagy százalékban | üres |
| Kezdő eltolás (px) | Lejjebb tolja azt a pontot, ahol az első képkocka megjelenik | üres |
| Befejező eltolás (px) | Megnöveli azt a görgetési távolságot, amelyen a sorozat lefut, így később ér véget | üres |
A képen a Pozíció, a Z-Index, a méretek és a két eltolás mezője látszik.
Hogyan viselkedik
Szekció neve “Hogyan viselkedik”A megjelenített képkockát az dönti el, hogy a látogató a widget szakaszán belül milyen messzire görgetett, ezért a képkockák egyenletesen lépnek előre. A tesztoldalon a 12 képkockás sorozat az oldal tetejénél a második képkockát mutatta, az alja felé pedig a tizenegyediket.
A képen a sorozat első szakasza látszik, a képkockán a számláló a 2. képkockát mutatja.
A képen ugyanaz az oldal lejjebb görgetve, a sorozat vége felé.
- Visszafelé görgetve a képkockák fordított sorrendben játszódnak le.
- Minél magasabb a szakasz, annál több görgetés jut egy képkockára, így az animáció lassabb és simább. Egy alacsony szakasznál a kép ugrál.
- Ha nincs kiválasztott kép, a widget a vásznon a No Image Selected! üzenetet mutatja a megjelenítés helyett.
- Nincs beépített ismétlés, automatikus lejátszás vagy lejátszógomb: az egyetlen vezérlés a látogató görgetése.
Korlátozások
Szekció neve “Korlátozások”- Az Alkalmazás erre → Belső oszlop mód nálunk nem működik: a rajzterület bekerül az oszlopba, de képkocka soha nem rajzolódik bele, sem szakasz oszlopában, sem belső szakaszéban, sem megadott oszlopmagassággal. Használd helyette az Alapértelmezett módot egy rugalmas (flexbox) tároló oszlopában.
- A Kép előtöltése (%) nem befolyásolta a letöltést: két azonos, 40 képkockás oldal, az egyik 100%-on, a másik 1%-on, az első betöltéskor mind a 40 képkockát lekérte.
- A képkockákat a böngésző rajzolja, ezért egy hosszú sorozat valódi letöltés. Tömörítsd a képeket, és csak annyi képkockát tarts meg, amennyi a mozgáshoz kell.
- A képkockák kitöltik a szakaszt, ezért az eltérő képarányú kép a széleken üres sávokat kap.
- A Távoli szerver csak számozott fájlnévmintát fogad: előtag, fix számjegyszámú szám és egyetlen kiterjesztés.
Hibaelhárítás
Szekció neve “Hibaelhárítás”Semmi sem mozdul, az első képkocka csak áll. A szakasznak vagy tárolónak nincs görgetési helye. Adj neki Min magasságot.
A sorozat sosem éri el az utolsó képkockát. Töröld a Befejező eltolás (px) értékét. A pozitív érték megnöveli a görgetési távolságot, így a sorozat az oldal alján túl ér véget. Ha a Kezdő eltolás és a Befejező eltolás is 500 volt, a tesztoldal alján a sorozat csak a 36. képkockáig jutott a 40-ből.
A képkockák eltakarják a szöveget. Emeld a szöveges widgetek Z-Index értékét, vagy csökkentsd a sorozat saját Z-Index értékét (alapból 0).
Az animáció ugrál, nem siklik. Vagy túl alacsony a szakasz a képkockák számához, vagy túl kevés a képkocka. Emeld a szakasz Min magasságát, vagy exportálj több képkockát.
Az oldal lassan tölt be. Tömörítsd a képkockákat, csökkentsd a felbontásukat arra, amekkorán megjelennek, és hosszú sorozatnál használd a Távoli szerver módot, hogy a fájlok ne a médiatárban legyenek.
Készült: