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)`;
});
Bei dem Video: https://www.chefblogger.me/2022/07/28/cooler-eigener-mauszeiger-fuer-die-eigene-webseite-programmieren-mit-css-und-js/
es funktioniert Gut aber ich habe keine Lösung für das Scrollen, wenn ich scrolle verschwindet der Kreis wie kann ich es verhindern?
LG Logan
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
Jaa Vielen Dank es Funktioniert!