Pomysł opiera się na elemencie <span class="cursor"></span>, który stale podąża za wskaźnikiem myszy. JavaScript monituje położenie kursora wewnątrz <div class="cursor_area"></div> i steruje wartościami „left” oraz „top”.
Niech zadziała
Podstawowym zdarzeniem jakie nas interesuje jest oczywiście mousemove. Przy pomocy zwracanych wartości pageX, pageY a także offset().left i offset().top możemy w łatwy sposób wyznaczyć położenie kursora wewnątrz boksu. Odległość o górnej krawędzi relatywnie do okna przeglądarki będzie wynosiła pageY - offset().top i analogicznie od lewej pageX - offset().left.
Każdy boks ma ustawiony cursor:none – dzięki czemu domyślny kursor jest niewidoczny. Do animacji wykorzystujemy możliwości @keyframes, selektorów :hover i :active i paru prostych sztuczek z przekształceniami – wszystko w zależności od potrzeb i wyobraźni. Przygotowując taki kursor na stronę nie mamy właściwie żadnych ograniczeń, a to przecież cenimy najbardziej.
Problem z warstwami
Ponieważ ikonka kursora jest elementem blokowym pływającym nad treścią strony, przykrywa inne elementy blokując interakcję kliknięcia. Jak w takim razie umożliwić klikanie w linki i inne elementy pod kursorem? Na nic byłyby wszystkie starania, gdyby nie było do dyspozycji właściwości pointer-events w CSS. Ustawienie jej wartości none pozwala wyłączyć na nim wszystkie zdarzenia myszy.
