V bežnej praxi je pre väčšinu používateľov podstatný frontend – User interface (čiže zobrazenie webu v prehliadači). To ale, ako sa dáta do frontendu dostanú je tá časť, ktorú používateľ nevidí. Paradoxne, ide zvyčajne o náročnejšiu časť práce. V dnešnej dobe sa snažia firmy alebo freelanceri mať čo najvychytanejšiu webstránku s veľa wow efektmi. Pozor, aj vo web developmente či web dizajne platí – “Menej je viac”.
V tomto blogu si povieme, ako môžeme pridať do webstránky custom kurzor, ktorý sa bude meniť podľa toho, na aký prvok mierime. Ide o jednoduchú kombináciu HTML, CSS a pár riadkov JavaScriptu. Komplexnosť a dĺžka kódu závisí aj od toho, aký komplexný kurzor chceme mať.
Step 0) Pre písanie kódu používam VS Code. Alternatívou je Atom, Sublime a podobne. Vy si samozrejme môžete napísať kód aj v samotnom notepade, avšak to neodporúčam. 🙂 Na samotnom spodku článku nájdete source kód pre nakopírovanie kódu.
Step 1) Pripravíme si html (napr. index.html) súbor so základnou šablónou. Ak máme už vytvorenú alebo vybratú stránku, tento krok môžme preskočiť. Ja budem písať css aj javascript priamo do html súboru, ale vy si môžete tieto súbory externe loadnuť .
Step 2) Do body pridáme <div> tag s id cursor.
Step 3) Do hlavičky pridáme css s nasledovným kódom.
Step 4) Pred zatváracím </body> tagom pridáme javascript kód. (Tento kód sa môže vložiť aj do hlavičky s atribútom defer).
A to je všetko 🙂
Keď chceme, aby viac elementov triggerovalo náš kurzor, stačí skopírovať funkciu triggerCursorElement alebo triggerCursorAllElements. Prvý parameter je vždy element, ktorý chceme. To môže byť samotný html tag alebo aj classa. Druhý parameter je classa, ktorú chceme priradiť pre kurzor.
V tomto článku je kurzor tiež implementovaný. Viete, ktoré tagy ovplyvňujú náš custom kurzor ? 🙂
Source kód
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom cursor</title>
<style>
#cursor {
width: 30px;
height: 30px;
position: fixed;
top: 0;
left: 0;
border: 1px solid #333;
border-radius: 100%;
pointer-events: none; /* Dôležité kvoli built-in kurzor aby mieril na elementy v DOM a nie na náš custom kurzor */
transition: transform 0.2s ease-in-out;
}
/* Prvý typ kurzora - heart shape */
#cursor.cursor-expand {
transform: scale(2);
background: rgba(255, 72, 0, 0.8);
border-radius: 0;
border: none;
clip-path: path(
"M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"
);
}
/* Druhý typ kurzora - zvačšujúci sa kurzor */
#cursor.cursor-image {
transform: scale(2);
background: url("https://www.ptagroup.sk/wp-content/uploads/2020/02/hand-with-phone.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div>
<h1>Heading 1</h1>
<aside>
<h3>Heading 3</h3>
</aside>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div id="cursor"></div>
<script>
const cursor = document.querySelector("#cursor");
window.addEventListener("mousemove", (e) => {
const left = e.clientX;
const top = e.clientY;
cursor.style.left = `${left - 15}px`;
cursor.style.top = `${top - 15}px`;
});
// Funkcia ktorá zabezpečuje to, ktorý element ovplyvní náš custom kurzor. Štýlovanie kurzoru je zabezpečené pomocou pridania class pre kurzor.
function triggerCursorElement(element, className) {
const triggerElement = document.querySelector(element);
triggerElement.addEventListener("mouseover", (e) => {
e.stopPropagation();
cursor.classList.add(className);
});
triggerElement.addEventListener("mouseout", (e) => {
e.stopPropagation();
cursor.classList.remove(className);
});
}
// Tá istá funkcia avšak selectnuté budú všetky tie isté tagy.
function triggerCursorAllElements(elements, className) {
const triggerElements = document.querySelectorAll(elements);
triggerElements.forEach((element) => {
element.addEventListener("mouseover", (e) => {
e.stopPropagation();
cursor.classList.add(className);
});
element.addEventListener("mouseout", (e) => {
e.stopPropagation();
cursor.classList.remove(className);
});
});
}
// V tomto prípade vyberáme heading 1 a aside tag.
triggerCursorElement("h1", "cursor-image");
triggerCursorElement("aside", "cursor-image");
// Tu vyberáme všetky paragraph tagy.
triggerCursorAllElements("p", "cursor-expand");
</script>
</body>
</html>
