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

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.

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.