Egérkurzor: folyamatjelző kör

A Folyamatjelző kurzor (oldaltörzs) az Egérkurzor widget Követő kör típusának három stílusa közül az egyik. Kitöltött kör helyett kétgyűrűs SVG-t rajzol, amely követi a mutatót. Ez az egyetlen kurzorstílus, amelyik egy kurzorterülethez kötött: csak akkor épül fel, ha a Kurzor területe Törzs, erre utal a név zárójeles része is. A widget közös beállításait az Egérkurzor: áttekintés fejezet írja le.

A widget a Pro bővítmény része.

Mielőtt elkezdesz

• A widget a The Plus Addons → Widgets oldalon a Mouse Cursor kapcsolóval kapcsolható be.
• A szerkesztőben a widget semmit sem rajzol ki, ezért a nyilvános oldalon nézd meg.
• Az effekt kikapcsol, ha a böngészőablak 991 képpont vagy keskenyebb.

Folyamatjelző kurzor hozzáadása

1. Húzd az Egérkurzor widgetet az oldalra.
2. Állítsd a Kurzor területe értékét Törzsre. Ez a stílus más területtel nem működik.
3. A Típus sorban kattints a Követő kör képre.
4. A Mutatótípus maradjon Előre meghatározott, és a Mutató kiválasztása mezőben válaszd ki, melyik mutatót lássa alatta a látogató.
5. A Követő kör stílusa legyen Folyamatjelző kurzor (oldaltörzs).

https://minta-bolt.hu/wp-admin/post.php?post=199&action=elementor

A képen a Kurzor területe Törzs, a Típus Követő kör, a Mutatótípus Előre meghatározott, a Mutató kiválasztása célkereszt, a Követő kör stílusa pedig Folyamatjelző kurzor (oldaltörzs). Alatta az Első kör mérete és a Második kör mérete csúszka látszik, majd az eltolások, a Kör Z-indexe és a Címkék listája a rámutatási effektushoz. A panel megjegyzése szerint a 2-es stílus csak akkor működik, ha a kurzorterületen a törzs lehetőséget választod ki.

Két extra csúszka jelenik meg. Ezek annak a két körnek a sugara, amelyből a gyűrű épül, egy rögzített 200 × 200 képpontos rajzterületen belül, ezért állnak meg 90-nél.

Beállítás	Mit csinál	Alapérték
Első kör mérete	A pálya gyűrű sugara. 0 és 90 között állítható	80
Második kör mérete	A rajta rajzolt gyűrű sugara. 0 és 90 között állítható	80
Kurzor bal oldali eltolása és Kurzor felső eltolása	A gyűrűt eltolják a mutatótól	10 px mindkettő
Kör Z-indexe	A rétegsorrend. Növeld, ha a gyűrű a tartalom mögé kerül	1

Mindkét méretet 80-ra állítva a két gyűrű pontosan egymásra esik. Ha eltéríted őket, például 80 és 60 értékkel, két jól elkülönülő gyűrűt kapsz.

https://minta-bolt.hu/km5-kurzor-gyuru/

A képen a két gyűrű a mutató körül látszik (itt 80 és 60 a két méret), az oldal tetején a címsor.

Színek

Nyisd meg a Stílus fület, ott a követő kör szakaszát. Két szín fontos itt.

https://minta-bolt.hu/wp-admin/post.php?post=199&action=elementor

A képen a Kör színe, a Körvonal szélessége, a Kitöltési szín, az Átlátszatlanság, A kör folyamatjelzőjének színe, a Körvonal folyamatjelzőjének szélessége, a Transzformációs CSS és az Átmenet időtartama látszik.

• A Kör színe a pálya gyűrű színe.
• A kör folyamatjelzőjének színe a ráfestett gyűrű színe.
• A Körvonal szélessége és a Körvonal folyamatjelzőjének szélessége adja meg, milyen vastag az egyik és a másik. Mindkettő 10 px-ről indul.
• A Rámutatás fül mind a négyet megismétli arra az esetre, amikor a mutató egy megfelelő elem fölött van.

A folyamatjelző nem halad

A név arra utal, hogy a gyűrű görgetés közben töltődik fel. Ebben a változatban ez nem történik meg. Egy 3872 képpont magas próbaoldalon a gyűrű 0, 25, 50, 75 és 100% görgetésnél mért állapota minden alkalommal azonos volt: a részleges ívet megrajzoló szaggatásoffset sosem kapott értéket, ezért a folyamatjelző gyűrű mindig teljes. Kezeld a Folyamatjelző kurzor (oldaltörzs) stílust kétgyűrűs kurzorként, ne görgetésjelzőként. Valódi görgetésjelzőhöz használj görgetési folyamatjelző sávot.

Mely elemek számítanak rámutatásnak

A Címkék listája a rámutatási effektushoz a Tartalom fülön CSS-választót vár, és az alapértéke a. Több választót vesszővel válassz el, például a,h1,h2. Ami nem érvényes CSS-választó, az az egész kurzort működésképtelenné teszi.

Hogyan viselkedik

• A gyűrű csak akkor épül fel, ha a Kurzor területe Törzs. Bármely más területnél egyszerű kört kapsz, gyűrű és SVG nélkül.
• Az Első kör mérete és a Második kör mérete sugár egy rögzített 200 × 200 képpontos dobozban, ezért a 90 a gyűrű legnagyobb mérete.
• A gyűrű rejtve van, amíg a mutató először be nem lép az oldalra.
• Az effekt 992 képpont ablakszélesség alatt teljesen ki van kapcsolva.

Korlátozások

• A widget csak Pro. A Pro bővítmény nélkül nincs kurzor, és értesítés sem jelenik meg.
• 991 képpont ablakszélességnél és alatta nem történik semmi.
• A gyűrű ebben a változatban nem követi a görgetést: teljesen megrajzolva marad az oldal tetejétől az aljáig.
• A stílus csak a Törzs területnél építi fel a gyűrűt. Bármely más terület csendben sima kört ad.
• A Kör Z-indexe 1-ről indul, ezért a gyűrű a legtöbb pozicionált tartalom mögött van, amíg nem növeled.
• A gyűrű nem lehet nagyobb a 200 × 200 képpontos rajzterületnél, bármilyen méreteket állítasz be.

Hibaelhárítás

Sima kört látok, nem gyűrűt. A Kurzor területe nem Törzs. A gyűrű csak azzal épül fel.

A gyűrű soha nem töltődik fel görgetéskor. Ez a fenti ismert korlátozás, nem egy kihagyott beállítás.

Csak egy gyűrűt látok. Az Első kör mérete és a Második kör mérete is 80 alapon, ezért a két gyűrű pontosan fedi egymást. Mozdítsd el az egyiket.

A gyűrű elbújik a szakaszaim mögött. Növeld a Kör Z-indexe értékét.