I attempted to find tutorials on creating a unique circle cursor that can hide the regular mouse cursor as well.
After implementing it with a difference blend mode, I encountered an issue where I wanted the scale to change when hovering over a link.
The problem arose because it failed to recognize and scale up when a <a> tag was nested inside a <div>.
I also require a smooth transition of 0.1s upon hover enter and exit for a seamless effect.
Your assistance would be immensely appreciated as I aim to complete this website in the coming months.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="portfolio" content="portfolio">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meskhi Graphics</title>
<link rel="icon" type="image/x-icon" href="/assets/Favicon.ico">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/mediaqueries.css">
</head>
<body>
<div class="a1">
<img class="icon" src="/assets/meskhi_graphics_logo.svg">
</div>
<div class="a2">
<ul class="skills">
<li class="social_media">Social Media <br>Marketing Manager</br></li>
<li class="graphic_designer">Graphic Designer</li>
<li><a href="#">UI/UX Designer</a></li>
</ul>
<p class="about_me">Hey, Ich bin David und komme aus Kalrsruhe.<br>
Beruflich bewege ich mich in der Welt des Grafikdesign<br>
und UI/UX Designs. Derzeit stecke ich mitten in einer<br>
Weiterbildung zum Social Media Marketing Manager.
</p>
</div>
<h1><a href="#">Hallo</a></h1>
<div class="a3"></div>
<div class="cursor"></div>
<script src="script.js" async defer></script>
</body>
</html>
CSS:
@import url(/css/satoshi.css);
* , *::before, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Satoshi-Variable;
}
html,body{
height:100%;
min-height:100%;
}
body {
background-color: #f0efe9;
height: 100vh;
width: 100%;
cursor: none;
}
a {
cursor: none;
text-decoration: none;
color: #0f1016;
}
div {
border-spacing: 0;
display: block;
}
.a1 {
width: 50%;
height: 25%;
}
.a2 {
width: 60%;
height: 50%;
}
.a3 {
width: 50%;
height: 25%;
}
.icon {
padding: 5% 0 5% 10%;
max-width: 40%;
}
.skills {
font-family: Satoshi-Variable;
font-weight: 600;
font-size: 2em;
padding-left: 10%;
padding-top: 2%;
padding-bottom: 2%;
color: #0f1016;
}
.graphic_designer {
margin-top: 2%;
margin-bottom: 2%;
}
ul {
list-style: none;
}
.about_me {
padding-left: 10%;
line-height: 2em;
color: #0f1016;
}
.cursor{
height: 40px;
width: 40px;
border-radius: 50%;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
background: #f0efe9;
mix-blend-mode: difference;
}
a:hover ~ .cursor{
transform: translate(-50%, -50%);
height: 80px;
width: 80px;
transition: width 0.1s linear, height 0.1s linear;
}
JS:
const cursor = document.querySelectorAll(".cursor");
window.addEventListener("mousemove", (e) => {
let x = e.pageX;
let y = e.pageY;
let path = e.composedPath();
cursor.forEach(el => {
el.style.left = `${x}px`;
el.style.top = `${y}px`;
links.forEach(link => {
link.addEventListener("mouseenter", () => {
el.classList.add("hover");
})
link.addEventListener("mouseleave", () => {
el.classList.remove("hover");
})
})
})
})
Trying to swap out the <a> tag with an <h1> outside a div didn't produce the desired result, showing limitations.