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.


Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

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.