# Sima átmenet

> Animált átmenet az oldalak között az egész webhelyen: burkolóelem, animációk, átfedés és betöltésjelző.

A **Sima átmenet** az oldalak közötti váltást animálja. A hatás a felhasználói élményt javítja: ha az átmeneti elemnek a tartalom burkolóelemét adod meg, a fejléc és a lábléc nem változik, a lapozás mégis folyamatos és látványos marad.

A megoldás nem ajax, hanem a böngésző saját oldalbetöltése. Ezért az URL megváltozik, és a keresőoptimalizálást (SEO) sem érinti.

> A sima átmenet korábbi funkció, alapból ki van kapcsolva. A **Dynamic Content for Elementor → Funkciók** oldalon kell bekapcsolni, utána jelenik meg a szerkesztőben. A WordPress 5.6-os jQuery-frissítése óta előfordulhat, hogy nem működik megfelelően, ezért éles oldalon használat előtt próbáld ki. Az egész webhelyre érvényes, egyes oldalakra külön nem állítható.

## Hol találod?

A beállítás a teljes webhelyre vonatkozik, ezért az Elementor szerkesztőjében, a **Dynamic.ooo** panelen éred el, a **Sima átmenet** szakaszban. A **Sima átmenet** kapcsolóval kapcsolod be, utána megadod a burkolóelem szelektorát.

![A Sima átmenet szakasz kapcsolóval, szelektorral és animációkkal](./kepek/animaciok-es-effektek-sima-atmenet.webp)

*A Sima átmenet szakasz kapcsolóval, szelektorral és animációkkal* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

## Burkolóelem szelektora

A legfontosabb beállítás a **Burkolóelem szelektora**: annak a burkolóelemnek a CSS-szelektora (`.osztály` vagy `#azonosító`), amelyet az oldalváltáskor animálni kell. Hogy a témádban mi ez az elem, az a téma HTML-szerkezetétől függ.

- Csak egyetlen szelektort adhatsz meg, többet egyelőre nem.
- Ha a szelektorhoz nincs találat az oldalon, nincs eredmény. Ilyenkor a mező mellett a **No matches** felirat látszik.
- Ha talál elemet, a felirat zöld **Detected** lesz, és megjelennek a további beállítások.
- A szelektornak ponttal vagy kettőskereszttel kell kezdődnie.

## Cél [a href] osztálya

A **Cél [a href] osztálya** azoknak a linkeknek a szelektora, amelyekre a sima átmenet rákattintáskor lefut. Megadhatsz csak egyet is, például `.smoothtransition`, ekkor a szelektor `a.smoothtransition`.

Ha az alapértéken hagyod, az összes link részt vesz az átmenetben, kivéve ezeket:

- `target="_blank"` linkek,
- `#` horgonylinkek,
- üres hivatkozások,
- `uploads` útvonalra mutatók,
- `mailto:` és `tel:` linkek.

Ezen kívül az átmenetből kimaradnak azok a linkek, amelyeken ezek az osztályok vannak: `no-transition`, `gallery-lightbox`, `ocean-lightbox`, `elementor-clickable`, `elementor-icon`, `is-lightbox`.

Az alapérték:

```
a:not([target="_blank"]):not([href=""]):not([href^="uploads"]):not([href^="#"]):not([href^="mailto"]):not([href^="tel"]):not(.no-transition):not(.gallery-lightbox):not(.elementor-clickable):not(.oceanwp-lightbox):not(.is-lightbox):not(.elementor-icon)
```

A mezőt bármikor módosíthatod, ha más linkeket szeretnél bevonni vagy kizárni.

## Animációk

![A további beállítások: animációk, átfedés, betöltésjelző](./kepek/animaciok-es-effektek-sima-atmenet-tovabbi.webp)

*A további beállítások: animációk, átfedés, betöltésjelző* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A **Kilépési animáció** az oldal elhagyásakor, a **Belépési animáció** az új oldal betöltődésekor játszódik le. Mindkettőnek három beállítása van:

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Kilépési átmenet stílusa** / **Belépési átmenet stílusa** | Az animáció stílusa: **Nincs**, **Halványítás**, **Bal**, **Jobb**, **Felül**, **Alul**, **Távolodó nagyítás**, **Közelítő nagyítás**, **Átfordítás balra**, **Átfordítás jobbra**, **Átfordítás felfelé**, **Átfordítás lefelé**. | **Halványítás** |
| **Kilépési sebesség** / **Belépési sebesség** | Az animáció hossza ezredmásodpercben (0 és 2000 között). | 500 |
| **Kilépési időzítési függvény** / **Belépési időzítési függvény** | A gyorsulási görbe: **Lineáris**, **Ease**, **Fokozatos gyorsulás**, **Fokozatos lassulás**, **Ease In Out** és az easeIn/easeOut/easeInOut változatok (Quint, Circ, Expo, Back). | **Ease In Out** |

## Átfedési hatás

Az átfedés egy rétegként húzódik végig az oldalon, és függönyszerűen tárja fel a tartalmat. Az **Átfedés használata** kapcsolóval kapcsolod be.

| Beállítás | Mit csinál |
| --- | --- |
| **Átfedés stílusa** | Az irány: **Bal**, **Felül** vagy **Alul**. |
| **Fedvény színe** | Az átfedés színe. |
| **Átfedő kép** | Szín helyett kép is lehet az átfedés. |

Más stílusok (átlós, kör, hullám, kettős) a leírás szerint még fejlesztés alatt állnak, ezért nem érhetők el.

![Az átfedés beállításai](./kepek/animaciok-es-effektek-sima-atmenet-betoltes.webp)

*Az átfedés beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

## Forgó betöltésjelző

A betöltésjelző az oldalváltás közben látszik. Beállításai:

| Beállítás | Mit csinál |
| --- | --- |
| **Betöltés engedélyezése szerkesztő módban** | A szerkesztőben is megjeleníti a betöltésjelzőt, hogy a kinézetét be tudd állítani. Beállítás után kapcsold vissza. |
| **Betöltési mód** | **Kör** (forgó kör), **Kép** (animált kép) vagy **Nincs**. |
| **Kör színe**, **A kör folyamatjelzőjének színe** | A kör és a folyamatjelző színe (**Kör** módban). |
| **Méret** | A jelző mérete (alapérték 32 px). |
| **Kör vonalvastagsága** | A kör vonalvastagsága (alapérték 5). |

## Eszközök

A **Sima átmenet alkalmazása itt** mezőben választod ki, mely eszközökön legyen aktív az átmenet: **desktop**, **tablet**, **mobile**. A reszponzív működés csak az előnézetben vagy az éles oldalon érvényesül, a szerkesztőben nem.