Heute habe ich mal ein ganz spassiges Thema für euch vorbereitet und zwar das Thema Mauszeiger oder wie es auf Englisch heisst Cursor.

Ihr kennt den alle, der hat sich in all den Jahren in denen ich ein Computer verwende – also seit ca 1988 – nie gross verändert. Dabei könnte man so viel mit diesem Mauszeiger anstellen. Habt ihr gewusst, dass man so einen Mauszeiger eigentlich mit ein wenig CSS und JS 100% selbst designen kann? Ja das wissen viele nicht – und darum ist der WOW Effekt auf Webseiten dann umso grösser wenn sie einen eigenen Mauszeiger haben.

Und aus diesem Grund zeige ich euch heute wie ihr einen einfachen aber coolen Cursor Effekt für eure Webseite entwickeln könnt.

Viel Spass dabei

Video

HTML

<div class="cursor"></div>

CSS

.cursor {
    position: fixed;
    background: #2696E8;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 20px #2696E8,
    0 0 60px #2696E8,
    0 0 100px #2696E8;
    transition: all 100ms ease-out;
    animation: colors 500ms infinite;
}

@keyframes colors {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

.cursor:before{
    content: "";
    position: absolute;
    background: #2696E8;
    width: 50px;
    height: 50px;
    opacity: 0.2;
    transform: translate(-30%, -30%);
    border-radius: 50%;
}

JS

<script>
    const cursor = document.querySelector(".cursor");
    
    document.addEventListener("mousemove", e => {
        let x = e.pageX - 10; //10 wäre die hälfte von 20 dem durchmesser des kreises
        let y = e.pageY - 10; //10 wäre die hälfte von 20 dem durchmesser des kreises
    
        cursor.style.top = y + "px";
        cursor.style.left = x + "px";
    });
    </script>

Update

Mir wurde in einem Kommentar gemeldet, dass bei grösseren Texte wo man viel Scrollen muss, dieser eigene Mauszeiger verschwindet oder auf einmal neben der eigentlichen Mausposition sich befindet.

Das tritt auf weil e.pageX die relative Position zum gesamten Dokument berechnet, mit clientx aber wird alles im Viewport berechnet.

Wenn das bei euch auch auftritt, dann ersetzt die .cursor CSS Klasse und die JS Funktion mit dem unteren Beispiel

CSS

.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
}

Javascript

const cursor = document.querySelector(".cursor");
 
    document.addEventListener("mousemove", e => {
      
    let x = e.clientX - 10;
    let y = e.clientY - 10;

    cursor.style.transform = `translate(${x}px, ${y}px)`;
      
      
    });