# Scroll Reveal

> Elemek animált megjelenítése, amikor a látogató a képernyőre görgeti őket.

A **Scroll Reveal** kiterjesztés animálja az elemeket, amikor azok görgetés közben belépnek a látható területre. Az oldal egyes részei először rejtve vannak (vagy halványak, eltoltak), és fokozatosan jelennek meg, ahogy a látogató lefelé görget. Programozás nélkül működik az Elementorban és a blokkszerkesztőben is.

Miért lehet hasznos:

- fokozza a vizuális élményt,
- a tartalmon át vezeti a látogató figyelmét,
- hosszú oldalakat tesz dinamikusabbá, kevésbé nyomasztóvá.

## Bekapcsolás

A **Crocoblock → JetPlugins Settings → JetTricks → Widgets & Extensions → Avaliable Extensions** részen kapcsold be a **Scroll Reveal Extension** kapcsolót.

## Alkalmazás widgetre vagy blokkra

1. Nyisd meg az oldalt az Elementorban vagy a blokkszerkesztőben, és add hozzá vagy válaszd ki a kívánt elemet.
2. A **Haladó** fülön nyisd ki a **JetTricks** szakaszt.
3. Kapcsold be a **Scroll Reveal** kapcsolót.

![A Scroll Reveal kapcsoló a widget Haladó → JetTricks szakaszában](./kepek/kiterjesztesek-szerkeszto.webp)

*A Scroll Reveal kapcsoló a widget Haladó → JetTricks szakaszában* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=elementor)

A kapcsoló bekapcsolása után az **Effect** legördülő listából választhatod ki az animációt:

| Effekt | Mit csinál |
| --- | --- |
| **Fade Up** | Az elem fokozatosan, felfelé mozogva jelenik meg. |
| **Fade Down** | Az elem halványul be, kissé lefelé mozogva. |
| **Fade Left** | Az elem balról csúszik be. |
| **Fade Right** | Az elem jobbról halványul be a végső helyére. |
| **Zoom In** | Az elem kisebb méretből nő meg megjelenés közben. |
| **Zoom Out** | Az elem nagyobb méretből ül a normál méretére. |
| **Flip Up** | Az elem felfelé fordul megjelenéskor, 3D-s hatást keltve. |
| **Flip Out** | Az elem elfordul, ahogy eltűnik vagy átmenetet tesz. |
| **Mask** | Az elem takarással (vágással) kerül elő: a tartalom fokozatosan bukkan elő egy rejtett területről. |

További beállítások:

- **Duration**: az animáció időtartama.
- **Delay**: a várakozás az elem láthatóvá válása és az animáció kezdete között.
- **Animate Once**: bekapcsolva az animáció csak egyszer fut le. Kikapcsolva minden alkalommal újra lejátszódik, amikor az elem belép a látható területre.
- **Viewport offset (px)**: mikor induljon az animáció a képernyő széléhez képest. Negatív értékkel korábban indul.
- **Active On**: mely eszközökön legyen érvényes az animáció.

A blokkszerkesztőben ugyanezek a beállítások érhetők el: nyisd ki a **JetTricks** részt, és kapcsold be a **Scroll Reveal** kapcsolót.

Konténerekre is alkalmazható (a konténer **Haladó → JetTricks** szakaszában a **Scroll Reveal** kapcsoló). Általában külön elemekre alkalmazva jobban szabályozható a sorrend és az élmény.

## A Mask effekt

A **Mask** effekt filmszerű képmegjelenítést ad. Alkalmas például építészeti irodák vagy fotósok oldalára, ahol a munkák fotói fokozatosan bukkannak elő görgetéskor, hirtelen megjelenés helyett. Jó választás még:

- nyitóoldali (hero) bannerekhez,
- teljes szélességű galériaátmenetekhez,
- előtte/utána bemutatókhoz,
- terméket bemutató szakaszokhoz,
- történetmesélő nyitóoldalakhoz.

Mivel az animáció fokozatosan fedi fel a tartalmat, mélységet ad az oldalnak anélkül, hogy erőszakos mozgással terhelné.

## Gyakori kérdések

**Mi a különbség a Fade és a Mask effekt között?**
A **Fade** effektek átlátszósággal és mozgással (fel, le, balra, jobbra csúszva) jelenítik meg az elemet. A **Mask** takarással, vágással hozza elő a tartalmat. A **Fade** egyszerűbb és könnyebb, a **Mask** filmszerűbb, látványosabb.

**Működik a Scroll Reveal Elementor nélkül, a blokkszerkesztőben?**
Igen, mindkét szerkesztőben működik. A blokkszerkesztőben a **JetTricks** szakaszban kapcsolhatod be a blokkhoz.

**Alkalmazhatom egy egész szakaszra, vagy csak widgetekre?**
Egyes widgetekre, blokkokra, konténerekre vagy szakaszokra is, a szerkesztő felépítésétől függően.

**Hogyan szabályozhatom az animáció sebességét és késleltetését?**
A **Duration** és a **Delay** beállítással a **JetTricks** szakaszban.

**Ismétlődik az animáció minden görgetéskor?**
Az **Animate Once** beállítástól függ: bekapcsolva csak egyszer fut le, kikapcsolva minden belépéskor újra.

**Befolyásolhatja az oldal teljesítményét?**
Sok animált elem egy oldalon kismértékben lassíthat, főleg gyengébb eszközökön. Használd válogatva, és ne alkalmazz nehéz effekteket minden elemre egyszerre.

**Kikapcsolható mobilon?**
Igen, az **Active On** beállítással kiválaszthatod, mely eszközökön (asztali gép, tablet, mobil) jelenjen meg az animáció.