Kursor szyty na miarę

Kursor szyty na miarę

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.


Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.