<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scary Ghost Cursor with Smoke</title>
<style>
body {
margin: 0;
height: 100vh;
overflow: hidden;
background: #000; /* Black background for spooky effect */
cursor: none; /* Hide default cursor */
}
.ghost-face {
position: fixed;
width: 100px;
height: 100px;
pointer-events: none; /* Prevent interference with clicks */
z-index: 1000;
transform: translate(-50%, -50%);
}
.face {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2); /* Smoke-colored face */
filter: blur(5px);
}
.eyes {
position: absolute;
top: 30%;
left: 50%;
width: 50%;
height: 50%;
display: flex;
justify-content: space-between;
transform: translateX(-50%);
}
.eye {
width: 15px;
height: 15px;
background: black; /* Eyes are black */
border-radius: 50%;
}
.mouth {
position: absolute;
bottom: 20%;
left: 50%;
width: 30px;
height: 10px;
background: black; /* Mouth is black */
border-radius: 50%;
transform: translateX(-50%);
}
.smoke-trail {
position: absolute;
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.1); /* Smoke effect */
border-radius: 50%;
filter: blur(15px);
animation: fadeOut 2s forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(2);
}
}
</style>
</head>
<body>
<div class="ghost-face" id="ghost-face">
<div class="face">
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<script>
const ghostFace = document.getElementById("ghost-face");
// Move the ghost face to follow the cursor
document.addEventListener("mousemove", (e) => {
ghostFace.style.left = `${e.pageX}px`;
ghostFace.style.top = `${e.pageY}px`;
createSmokeTrail(e.pageX, e.pageY);
});
// Create the smoke trail effect
function createSmokeTrail(x, y) {
const smoke = document.createElement("div");
smoke.className = "smoke-trail";
smoke.style.left = `${x}px`;
smoke.style.top = `${y}px`;
document.body.appendChild(smoke);
// Remove the smoke element after the animation ends
setTimeout(() => {
smoke.remove();
}, 2000); // Matches the animation duration
}
</script>
</body>
</html>
-
How to reduce TTFB
In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.
In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)