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
1 | <div class="cursor"></div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .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
1 2 3 4 5 6 7 8 9 10 11 | <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> |
0 Kommentare