# Görgetési animáció: szekció belépő és kilépő hatása görgetésre

> A Görgetési animáció (Section Scroll Animation) kiterjesztés: belépő és kilépő hatások, késleltetés, mobil kikapcsolás.

A **Görgetési animáció** egy szekció vagy tároló mozgását a lap görgetéséhez köti. Ahogy a szekció a képernyő aljáról felbukkan, felrepülhet, beúszhat, kicsinyedhet vagy elfordulhat a helyére, a képernyő tetején kilépve pedig elhalványulhat vagy elrepülhet. A hatás a görgetősávot követi, ezért visszafelé görgetve visszafelé játszódik le.

Nem widget, hanem kiterjesztés: bekapcsolás után minden tároló és szekció **Haladó** fülén megjelenik egy új szakasz. Pro bővítmény szükséges hozzá.

## Előkészületek

- Kapcsold be a **Section Scroll Animation** kiterjesztést a **The Plus Addons → Extensions** oldalon (nem a Widgets oldalon).
- Az Elementor legyen telepítve és aktív.
- Az animálni kívánt szekció fölött és alatt legyen tartalom. A hatást a görgetési helyzet vezérli, ezért egy olyan szekciónak, amely betöltéskor már teljesen a képernyőn van, nincs mit „végigfutnia”.

## Lépések

1. Jelöld ki a tárolót, belső tárolót, szekciót vagy belső szekciót, amelyet animálni szeretnél.
2. Nyisd meg a **Haladó** fület, és bontsd ki a **Görgetési animáció** szakaszt.
3. Válassz **Belépési animáció**-t. Ez akkor játszódik le, amikor a szekció a képernyőre emelkedik. Alapértéke: Nincs.
4. Válassz **Kilépési animáció**-t. Ez akkor játszódik le, amikor a szekció a képernyő tetején elhagyja a nézetet. Alapértéke szintén Nincs.
5. A közzétett oldalt görgesd, ne a szerkesztő előnézetét.

![A Görgetési animáció szakasz egy tároló Haladó fülén, a Belépési animáció Felfelé repülés értékkel](./kepek/kiterjesztesek-3-szekcio-panel.webp)

*A Görgetési animáció szakasz egy tároló Haladó fülén, a Belépési animáció Felfelé repülés értékkel* (https://minta-bolt.hu/wp-admin/post.php?post=373&action=elementor)

## A hatások

Mindkét legördülő lista ugyanazt a kilenc hatást kínálja (plusz a Nincs értéket). Az elhalványulás a belépési listában **Fade in**, a kilépésiben **Fade out**, vagyis ugyanaz a hatás ellenkező irányban.

- Scale smaller (kicsinyítés)
- Fade in / Fade out (be- és kihalványulás)
- 3D Rotate backward (3D forgatás hátrafelé)
- 3D Rotate forward (3D forgatás előre)
- Carousel forward (körhinta előre)
- Fly up (felfelé repülés)
- Fly left (balra repülés)
- Fly right (jobbra repülés)
- 3D cube (3D kocka): a lista címkéje is azt javasolja, hogy a következő sor szekciójánál is a 3D kocka belépési animációt használd, hogy a két szekció együtt forduljon.

## Késleltetés

A **Belépési késleltetés** és a **Kilépési késleltetés** egész számot fogad -20 és 20 között. A nevük ellenére nem azt módosítják, mikor indul a hatás, hanem a hosszát: a pozitív szám megnyújtja, a negatív lerövidíti az animációt. Ha üresen hagyod, a kiterjesztés -5-ös értéket használ.

Ez a két mező a kilenc hatásból csak hétnél jelenik meg: **Fly up**, **Fly left**, **Fly right**, **Scale smaller**, **Fade**, **3D Rotate forward** és **3D Rotate backward**. A **Carousel forward** és a **3D cube** esetén a késleltetés mező eltűnik.

## Beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Belépési animáció** | A szekció görgetésre történő megjelenésekor lejátszódó hatás. | Nincs |
| **Kilépési animáció** | A szekció kilépésekor lejátszódó hatás. | Nincs |
| **Belépési késleltetés** | -20 és 20 között; pozitív érték meghosszabbítja, negatív lerövidíti a belépést. | üres (-5-ként működik) |
| **Kilépési késleltetés** | -20 és 20 között; pozitív érték meghosszabbítja, negatív lerövidíti a kilépést. | üres (-5-ként működik) |
| **Törzs túlcsordulásának javítása** | Olyan sablonoknál, ahol egy hatás közben rövid időre vízszintes görgetősáv jelenik meg. | Nem |
| **Kikapcsolás mobilon** | Mobil eszközön kikapcsolja a hatást. | Nem |

## Mit tapasztalsz az oldalon

Egy tárolóval, amelynek **Belépési animáció**: **Fly up** és **Kilépési animáció**: **Fade out**, a többi beállítás pedig alap, 1200 × 800 képpontos ablakban görgetve így viselkedik:

| Görgetési helyzet | Mit csinál a szekció |
| --- | --- |
| Az oldal teteje | a végső helyzete alatt 240 képponttal áll |
| Félúton | már csak 22 képponttal van a végső helye alatt |
| Teljesen látszik | a helyén van, teljesen átlátszatlan |
| Kilép a tetején | az átlátszatlansága kb. 0,28-ra csökken |
| Már elhagyta a nézetet | átlátszatlansága 0 |

Ha mindkét lista **Nincs** értéken áll, az oldalra semmi nem kerül: se osztály, se szkript, se mozgás.

## Hogyan viselkedik

- A görgetősávot követi: a szekció helyzetét és átlátszóságát a görgetés mértékéből számolja, ezért visszafelé görgetve fordítva játszódik le.
- A kilépés akkor indul, amikor a szekció nagyjából a képernyő harmadáig emelkedett. Erről a **Kilépési késleltetés** panelmegjegyzése is szól.
- A **Kikapcsolás mobilon** az eszközt nézi, nem az ablak szélességét. Ha asztali böngészőben összehúzod az ablakot, semmi nem változik; telefonos böngészőazonosítónál viszont a hatás valóban kikapcsol. Böngésződ eszközemulációjával vagy valódi telefonon próbáld ki.
- A **Kikapcsolás mobilon** az egész oldalra érvényes: ha egy szekciónál bekapcsolod, az oldal összes animált szekciójánál kikapcsol. A panelmegjegyzés is ezt írja.

## Korlátozások

- Pro bővítmény kell hozzá, ingyenes változata nincs.
- Mobilon nem kapcsolható ki csak egy szekcióra.
- A **Carousel forward** és a **3D cube** hatásnál nincs késleltetés mező: ezek a beépített hosszon futnak.
- A szerkesztő előnézete nem mérvadó. Tedd közzé vagy nézd meg előnézetben az oldalt, és rendes böngészőablakban görgesd.

## Hibaelhárítás

**Semmi nem animálódik.** Három dolgot ellenőrizz: a **Section Scroll Animation** be van kapcsolva a **The Plus Addons → Extensions** oldalon; a The Plus Addons Pro aktív; és legalább az egyik legördülő lista nem **Nincs** értéken áll.

**Asztalon animál, de telefonon nem tudom kikapcsolni.** A **Kikapcsolás mobilon** a böngészőazonosítóra figyel. Az asztali böngészőablak átméretezése nem váltja ki, használj eszközemulációt vagy valódi telefont.

**Az egyik szekciónál bekapcsoltam a mobil kapcsolót, és az egész oldalon eltűnt az animáció.** Ez a szándékos működés: a beállítást az oldal egyszer olvassa be, ezért egyetlen szekció is kikapcsolja a hatást mindenhol az oldalon.

**Görgetősáv villan fel a hatás közben.** Kapcsold be a **Törzs túlcsordulásának javítása** kapcsolót. Pontosan erre való: olyan sablonoknál, ahol a mozgó szekció rövid időre túlnyúlik az oldal szélén.