.hover-area {
padding: 20px;
background-color: #4CAF50;
color: white;
border-radius: 8px;
cursor: pointer;
position: relative;
}
.smoke-effect {
position: absolute;
pointer-events: none;
animation: rise-up 3s ease-out forwards;
}
@keyframes rise-up {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
50% {
transform: translate(var(--offset-x, 0px), -50px) scale(1.2);
opacity: 0.8;
}
100% {
transform: translate(var(--offset-x, 0px), -100px) scale(0.8);
opacity: 0;
}
}
img {
width: 20px;
height: 20px;
}
Hover over this area
const hoverArea = document.querySelector('.hover-area');
let smokeInterval = null;
let cursorX = 0;
let cursorY = 0;
hoverArea.addEventListener('mouseenter', () => {
// Start the smoke creation interval
smokeInterval = setInterval(() => {
createSmokeEffect(cursorX, cursorY);
}, 200);
});
hoverArea.addEventListener('mousemove', (event) => {
// Update cursor position
cursorX = event.pageX;
cursorY = event.pageY;
});
hoverArea.addEventListener('mouseleave', () => {
// Stop the smoke creation interval
clearInterval(smokeInterval);
smokeInterval = null;
});
function createSmokeEffect(x, y) {
const smokeImage = document.createElement('img');
smokeImage.src = 'https://noqx.io/wp-content/uploads/2024/12/💜.png'; // Replace with your own image
smokeImage.classList.add('smoke-effect');
// Add random horizontal offset for spreading effect
const offsetX = Math.random() * 40 - 20; // Random offset between -20px and +20px
smokeImage.style.setProperty('--offset-x', `${offsetX}px`);
smokeImage.style.left = `${x}px`;
smokeImage.style.top = `${y}px`;
smokeImage.style.position = 'absolute';
document.body.appendChild(smokeImage);
// Remove the smoke effect after the animation ends
smokeImage.addEventListener('animationend', () => {
smokeImage.remove();
});
}
