Skip to content

Instantly share code, notes, and snippets.

@DatsGabs
Created Jul 15, 2021
Embed
What would you like to do?
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
.container {
width: 100vw;
height: 100vh;
background-color: white;
position: relative;
}
.circle {
width: 60px;
height: 60px;
background: white;
mix-blend-mode: difference;
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
pointer-events: none;
}
</style>
</head>
<body>
<div class="container">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio enim natus, modi aperiam, aspernatur rerum, molestias corporis fuga nihil dicta fugit in sapiente eveniet eius eos soluta suscipit sunt molestiae. </p>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio enim natus, modi aperiam, aspernatur rerum, molestias corporis fuga nihil dicta fugit in sapiente eveniet eius eos soluta suscipit sunt molestiae. </p>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio enim natus, modi aperiam, aspernatur rerum, molestias corporis fuga nihil dicta fugit in sapiente eveniet eius eos soluta suscipit sunt molestiae. </p>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio enim natus, modi aperiam, aspernatur rerum, molestias corporis fuga nihil dicta fugit in sapiente eveniet eius eos soluta suscipit sunt molestiae. </p>
<div class="circle"></div>
</div>
<script>
const cursor = document.querySelector(".circle");
const delay = 250;
function throttle(callback, limit) {
let wait = false;
return function () {
if (!wait) {
callback.apply(null, arguments);
wait = true;
setTimeout(function () {
wait = false;
}, limit);
}
};
}
// window.resize callback function
function getDimensions(e) {
cursor.style.top = `${e.clientY - 25}px`;
cursor.style.left = `${e.clientX - 25}px`;
}
// window.resize event listener
window.addEventListener("mousemove", (e) => {
throttle(getDimensions(e), delay);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment