# Gö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

- **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ág**ot, különben nincs mit végiggörgetni.

## 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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-sorozat-tavoli-szerver/)).

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

1. Adj az oldalhoz egy szakaszt vagy tárolót, és húzd bele a **Görgetési sorozat** widgetet.
2. A **Tartalom** fül **Görgetési sorozat** szakaszában az **Alkalmazás erre** mezőt hagyd **Alapértelmezett**en, így a képkockák az egész szakaszt kitöltik.
3. 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.
4. Adj a szakasznak görgetési helyet. Tárolónál állítsd be az **Elrendezés** alatt a **Min magasság**ot; régi Elementor-szakasznál a **Magasság** legyen **Min magasság**, és adj meg egy értéket.

![A Görgetési sorozat widget Tartalom füle galériával](./kepek/kepek-media-sorozat-panel.webp)

*A Görgetési sorozat widget Tartalom füle galériával* (https://minta-bolt.hu/wp-admin/post.php?post=133&action=elementor)

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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-sorozat-ragados/)). 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

### 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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-sorozat-torzs-oszlop/). |
| **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

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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-sorozat-tavoli-szerver/)).

### 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

| 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 Görgetési sorozat widget Stílus füle](./kepek/kepek-media-sorozat-stilus.webp)

*A Görgetési sorozat widget Stílus füle* (https://minta-bolt.hu/wp-admin/post.php?post=133&action=elementor)

A képen a **Pozíció**, a **Z-Index**, a méretek és a két eltolás mezője látszik.

## 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 sorozat a görgetés elején: a 2. képkocka](./kepek/kepek-media-sorozat-eleje.webp)

*A sorozat a görgetés elején: a 2. képkocka* (https://minta-bolt.hu/km3-sorozat-alap/)

A képen a sorozat első szakasza látszik, a képkockán a számláló a 2. képkockát mutatja.

![A sorozat a görgetés vége felé: a 11. képkocka](./kepek/kepek-media-sorozat-vege.webp)

*A sorozat a görgetés vége felé: a 11. képkocka* (https://minta-bolt.hu/km3-sorozat-alap/)

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

- 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

**Semmi sem mozdul, az első képkocka csak áll.** A szakasznak vagy tárolónak nincs görgetési helye. Adj neki **Min magasság**ot.

**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.