# Lottie Files widget

> Lottie-animáció beillesztése az oldalra: bekapcsolás, forrás, megjelenítés és lejátszási módok.

A Lottie JSON alapú fájlformátum animációkhoz. Kisebb, mint a legtöbb más animációs formátum, ezért nem lassítja az oldalt, és minőségromlás nélkül méretezhető. A **Lottie Files** widget Lottie-fájlt illeszt az Elementorral szerkesztett oldalra.

## A widget bekapcsolása

1. Nyisd meg a **Crocoblock → JetPlugins Settings → JetElements → Widgets & Extensions** oldalt.
2. Az **Elérhető widgetek** blokkban kapcsold be a **Lottie Files** kapcsolót.

A változtatás magától mentődik.

## A widget hozzáadása

Az Elementorral szerkesztett oldalon vagy bejegyzésben keresd meg a **Lottie Files** widgetet, és húzd az oldalra. Az alapértelmezett animáció a Crocoblock logója; ezt bármelyik másikra cserélheted. A widgetnek van **Tartalom**, **Stílus** és **Haladó** füle.

## Tartalom

A **Tartalom** fülön két szakasz van: **Tartalom** és **Beállítások**.

![A Lottie Files widget Tartalom szakasza](./kepek/medialis-widgetek-lottie-1.webp)

*A Lottie Files widget Tartalom szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

- **Forrás**: két gomb közül választasz. A **JSON-fájl** a médiatárból választható fájlt jelent, a másik gomb (külső URL) hivatkozást vár.
- **Link**: egy oldal címe, amely a widgetre kattintva nyílik meg. A mező mellett a hivatkozásbeállítások az **új ablakban megnyitást**, a **nofollow hozzáadását** és az egyedi attribútumokat kínálják.

## Beállítások

![A Lottie Files widget Beállítások szakasza](./kepek/medialis-widgetek-lottie-2.webp)

*A Lottie Files widget Beállítások szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

**Renderelő**: az animáció megjelenítésének módja.

- **SVG**: az elem HTML-lel épül, és JavaScripttel mozog. Kis animált ikonokhoz és gombokhoz jobb.
- **Canvas**: az elem létrehozását és az animálást is JavaScript végzi. Összetett animációkhoz jobb.

**Lejátszási művelet**: az animáció elindításának módja. Mindegyiknek vannak saját kiegészítő beállításai:

| Lejátszási művelet | Hogyan működik |
| --- | --- |
| Automatikus lejátszás | Az animáció magától elindul. Az **Automatikus lejátszás késleltetése (ms)** mezőben megadhatod, mennyit vár az indulás előtt. |
| Rámutatáskor | Az animáció az egérmutató ráhúzására indul. Ilyenkor megjelenik az **Egérelhagyáskor** lista a kimenet viselkedéséhez. |
| Kattintáskor | Az animáció csak kattintásra játszik le. |
| Kattintáskor megfordítható | A második kattintásra visszafelé játszik le, a harmadikra újra előre, és így tovább. |
| Görgetés | Az animáció a görgetéssel együtt halad, a sebessége a görgetésével egyezik. Megjelenik a **Viewport** csúszka, amellyel azt adhatod meg, a képernyő mekkora részét kell kitöltenie az animációnak, mielőtt elindul vagy megáll. |

A rámutatáskori viselkedés lehetőségei:

- **Nincs művelet**: az animáció végigmegy, és megáll.
- **Szünet**: ha a mutató elhagyja a területet, az animáció megáll; visszatéréskor onnan folytatódik.
- **Leállítás**: az animáció teljesen leáll, és visszaugrik az elejére.
- **Visszafelé**: ha a mutató elhagyja a területet, az animáció visszafelé játszódik le.

Az **Automatikus lejátszás**, a **Rámutatáskor**, a **Kattintáskor** és a **Viewport** műveleteknél az alábbi beállítások is elérhetők:

| Beállítás | Mit csinál |
| --- | --- |
| Ismétlés | Az animáció folyamatosan ismétlődik. Bekapcsolva megjelenik a **Loop Times** mező az ismétlések számához. |
| Visszafordítva | Az animáció visszafelé játszódik le. |
| Lejátszás sebessége | Gyorsabb vagy lassabb mozgás; az 1 az eredeti sebesség. |

## Stílus és haladó beállítások

A **Stílus** fül az igazítást, a szélességet, az átlátszóságot, a CSS-szűrőket, a szegély típusát, a szegély lekerekítését és az árnyékot kezeli. A **Haladó** fülön az elrendezés, a dinamikus láthatóság, a háttér, a szegély, a mozgáshatás és egyebek állíthatók.