<div class="nav-wrapper">
<nav>
<a href="#" class="link">
<span>Home</span>
</a>
<a href="#" class="link">
<span>Our Story</span>
</a>
<a href="#" class="link">
<span>Studio</span>
</a>
<a href="#" class="link">
<span>Contact</span>
</a>
<div class="cursor"></div>
</nav>
</div>
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
body {
margin: 0;
padding: 0;
cursor: none;
font-family: 'Poppins', sans-serif;
}
.nav-wrapper {
width: 100%;
height: 100vh;
background: #161616;
}
.nav-wrapper nav {
display: flex;
justify-content: space-around;
width: 100%;
margin: 0 auto;
text-align: center;
position: absolute;
top: 50%;
}
.link {
transition: all 0.3s ease;
}
.link span {
display: inline-block;
font-weight: bold;
letter-spacing: 1px;
color: #fff;
font-size: 36px;
text-transform: uppercase;
pointer-event: none;
transition: transform 0.1s linear;
}
.cursor {
pointer-events: none;
position: fixed;
padding: 0.3rem;
background-color: #fff;
border-radius: 50%;
mix-blend-mode: difference;
transition: transform 0.3s ease;
}
.link:hover ~ .cursor {
transform:translate(-50%, -50%) scale(8);
}
@media screen and (max-width: 1024px) {
.nav-wrapper nav {
flex-direction: column;
}
}
(function () {
const link = document.querySelectorAll('nav > .link');
const cursor = document.querySelector('.cursor');
const animateit = function (e) {
const span = this.querySelector('.link > span');
const { offsetX: x, offsetY: y } = e,
{ offsetWidth: width, offsetHeight: height } = this,
move = 25,
xMove = x / width * (move * 2) - move,
yMove = y / height * (move * 2) - move;
span.style.transform = `translate(${xMove}px, ${yMove}px)`;
if (e.type === 'mouseleave') span.style.transform = '';
};
const editCursor = e => {
const { clientX: x, clientY: y } = e;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
};
link.forEach(b => b.addEventListener('mousemove', animateit));
link.forEach(b => b.addEventListener('mouseleave', animateit));
window.addEventListener('mousemove', editCursor);
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.