Cooler eigener Mauszeiger für die eigene Webseite programmieren – mit CSS und JS

von | Juli 28, 2022 | Allgemein | 3 Kommentare

Schlagwörter: CSS - CSS3 - HTML - Javascript

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)`;
      
      
    });




3 Kommentare

    • Eric-Oliver Mächler

      hi du, ich habe mir den code nochmal angeschaut und auf dein problem getestet – ich habe ein kleines update eingebaut – einfach den code mit dem neuen code ersetzen – danach sollte es wieder gehen.

      teste es und gib mir bescheid

      Antworten
      • Logan

        Jaa Vielen Dank es Funktioniert!

        Antworten

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert