15. diel - Úpravy a nastavenia kurzorov v CSS3

V minulej lekcii, Zmeny vlastností posuvníkov (scrollbar) , sme si ukázali, ako v CSS zmeniť veľkosť, farbu, alebo dokonca aj tvar posuvníkov na stránke.

Vitajte u lekcie, v ktorej si ukážeme, ako v CSS3 nastaviť vlastný vzhľad kurzora myši a aké všetky typy existujú.

Čo sa v tejto lekcii naučíme vytvoriť (dajte kurzor na oranžový obdĺžnik)?

Kurzory všeobecne

Zo základu sa nám vzhľad kurzora mení na základe nastavenia alebo funkcie elementu, ktorý kurzorom prekryjeme. Zmeniť toto nastavenie môžeme tak, že k triede elementu pridáme vlastnosť cursor:, v ktorej nastavíme požadovaný atribút. Tu je výpočet všetkých možných základných nastavení:

• auto
• default
• none
• context-menu
• help
• pointer
• progress
• wait
• cell
• crosshair
• text
• vertical-text
• alias
• copy
• move
• no-drop
• not-allowed
• grab
• grabbing
• url (adresa obrázku)
• wait
• zoom-in
• zoom-out
• all-scroll
• col-resize
• row-resize

Značná časť z tohto zoznamu sa už používa len výnimočne, ale je dobré vedieť, že existujú. Ďalej sa môžeme ešte stretnúť s kurzory znázorňujúcimi zmenu veľkosti okna. Ich názvy sú logicky odvodené podľa anglických názvov svetových strán (N Orth, W est, E ast, S outh) a ich kombináciu:

• n-resize
• e-resize
• s-resize
• w-resize
• ns-resize
• ew-resize
• ne-resize
• nw-resize
• se-resize
• sw-resize
• nesw-resize
• nwse-resize

Všetky jednotlivé nastavenia si môžeme vyskúšať nižšie, stačí váš kurzor umiestniť na príslušný boxík:

Na mobilnej verzii sa vám kurzor pravdepodobne neukáže.

Pri vytváraní stránok je ale lepšie základné vzhľady kurzorov na určitých elementoch nepřenastavovat, zbytočne to mate užívateľa.

Zmeny kurzora v CSS

Na niektorých špecifických webových stránkach sa dnes môžeme stretnúť s kurzory myši, ktoré vyzerajú inak ako tie základné, čo sa zvyčajne používajú. Nastaviť si niečo také aj na svoje vlastné stránky je pomerne jednoduché. Ukážeme si teda, ako miesto základného vzhľadu kurzora nastaviť obrázok čo vyzerá ako kurzor nový. Vytvoríme si jednoduchý HTML súbor s jedným elementom a triedou box:

<div class="box"></div>

K tomu pridáme CSS súbor s nastavením našej triedy:

.box {
  width: 350px;
  min-height: 55vh;
  background-color: #F90;
}

Nezabudnite si CSS súbor do HTML stránky importovať alebo použite interný štýly:

<link rel="stylesheet" href="main.css" type="text/css">

Mali by sme mať niečo takéto:

Teraz už stačí len nastaviť, aby sa pri prekrytí nášho obdĺžnika kurzor zmenil. Je potrebné, aby sme kurzor mali niekde uložený lokálne, aby sa nestalo, že webová stránka bude časom nedostupná alebo súbor odstráni. Kurzor si môžete stiahnuť nižšie:

Teraz si nastavme cestu správne ku kurzora (cesta k súboru sa môže u vás líšiť):

.box:hover {
 cursor: url('mycursor.gif'), auto;
}

Použiť sa dá akýkoľvek obrázok. Jediné, na čo si človek musí dať pozor, je jeho veľkosť. Niektoré prehliadače a operačné systémy majú totiž pre tieto zmeny kurzorov prednastavené limity. Najlepšie je používať obrázky s veľkosťou 32x32 pixelov, tie by mali fungovať vo veľkej väčšine prípadov. Ak nastavíte obrázok väčší ako stanovený limit, prehliadač ho bude automaticky ignorovať. Veľká väčšina prehliadačov tiež teraz nepodporuje v rámci CSS animované kurzory, takže súbory s príponou gif alebo ani sa budú ukazovať buď ako obyčajný statický obrázok alebo pre istotu nebudú fungovať vôbec. Náš príklad bude po nastavení CSS vyzerať takto:

Pokiaľ vám ale obrázok nestačí a chcete mať kurzor nejakým spôsobom animovaný, dá sa to docieliť za pomocou Javascript funkcií. Celý kód si tu vysvetľovať nebudeme. V skratke to funguje tým spôsobom, že funkcia zistí pozíciu kurzora a okolo neho vytvoria ľubovoľný tvar nastavený podľa CSS triedy. V našom prípade to budú dva jednoduché kruhy. Tie sa potom vykresľujú stále dookola tak rýchlo, že pri pohybe kurzorom to vyzerá ako by išlo o vzhľad kurzora samotného:

Kód je pomerne zložitý a nad rámec tohto kurzu, patrí to skôr do kurzu JavaScriptu:

<script>
const pointer = document.createElement("div")
pointer.id = "pointer-dot"
const ring = document.createElement("div")
ring.id = "pointer-ring"
document.body.insertBefore(pointer, document.body.children[0])
document.body.insertBefore(ring, document.body.children[0])

let mouseX = -100
let mouseY = -100
let ringX = -100
let ringY = -100
let isHover = false
let mouseDown = false
const init_pointer = (options) => {

    window.onmousemove = (mouse) => {
        mouseX = mouse.clientX
        mouseY = mouse.clientY
    }

    window.onmousedown = (mouse) => {
        mouseDown = true
    }

    window.onmouseup = (mouse) => {
        mouseDown = false
    }

    const trace = (a, b, n) => {
        return (1 - n) * a + n * b;
    }
    window["trace"] = trace

    const getOption = (option) => {
        let defaultObj = {
            pointerColor: "#750c7e",
            ringSize: 15,
            ringClickSize: (options["ringSize"] || 15) - 5,
        }
        if (options[option] == undefined) {
            return defaultObj[option]
        } else {
            return options[option]
        }
    }

    const render = () => {
        ringX = trace(ringX, mouseX, 0.2)
        ringY = trace(ringY, mouseY, 0.2)

        if (document.querySelector(".p-action-click:hover")) {
            pointer.style.borderColor = getOption("pointerColor")
            isHover = true
        } else {
            pointer.style.borderColor = "red"
            isHover = false
        }
        ring.style.borderColor = getOption("pointerColor")
        if (mouseDown) {
            ring.style.padding = getOption("ringClickSize") + "px"
        } else {
            ring.style.padding = getOption("ringSize") + "px"
        }

        pointer.style.transform = `translate(${mouseX}px, ${mouseY}px)`
        ring.style.transform = `translate(${ringX - (mouseDown ? getOption("ringClickSize") : getOption("ringSize"))}px, ${ringY - (mouseDown ? getOption("ringClickSize") : getOption("ringSize"))}px)`

        requestAnimationFrame(render)
    }
    requestAnimationFrame(render)
}</script>
<script>
 init_pointer({
    })
</script>

Patrí k tomu aj CSS:

#pointer-dot {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border: 2.5px solid red;
    position: fixed;
    border-radius: 4px;
    z-index: 101;
    pointer-events: none;
    transition: border-color 0.5s;
}

#pointer-ring {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    padding: 15px;
    border: 2px solid #750c7e;
    position: fixed;
    border-radius: 100px;
    z-index: 102;
    pointer-events: none;
}

html {
    cursor: none !important;
}

a {
    cursor: none !important;
}

Predstavivosti sa medze naozaj nekladú, ale pamätajte na to, že čím zložitejšie animácie, tým pomalší načítania stránky. Autor tohto skriptu je seattleowl a môžete sa pozrieť na jeho repozitár na GitHub.

Pokiaľ nie je niečo jasné, všetky zobrazené ukážky si môžete stiahnuť nižšie:)

V ďalšej lekcii, Pozadie elementov - obrázok, farba, ohraničenie , sa naučíme, ako nastaviť elementom jednoduchú farbu alebo obrázok do pozadia.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.