Looking to make your website more interactive and visually appealing? In this tutorial, we’ll show you how to create a stunning Smokey Cursor Animation that can grab your visitors’ attention and encourage them to stay longer on your site.
This animation effect is perfect for hero banners, landing pages, or portfolio sites, where user interaction matters. The animation follows your mouse movement, creating a beautiful smoky trail in the background, enhancing the overall user experience.
Why Use Smokey Cursor Animation?
Increases user engagement.
Adds a modern and unique look to your website.
Lightweight and easy to implement.
Works perfectly with Elementor and other page builders.
How to Implement Smokey Cursor Animation in WordPress
You don’t need to write complex code or install heavy plugins. Just follow these simple steps:
Step 1: Copy and Paste the CSS
First, copy the following CSS and paste it into any custom CSS plugin you use in WordPress (like “Simple Custom CSS” or via the Elementor’s “Site Settings > Custom CSS”):
Step 2: Add the JavaScript
Next, copy the JavaScript code below and paste it inside an Elementor HTML widget anywhere on the page:
Step 3: Add the Section Class
To activate the animation in a specific section, simply add the class PromiseAnimationSection to that section in Elementor.
How to do it:
Edit the section in Elementor.
Go to the “Advanced” tab.
In the “CSS Classes” field, add:
PromiseAnimationSection
Watch the Full Video Tutorial
For a visual walkthrough, check out our step-by-step video tutorial attached beside this post. It will help you understand the implementation process more clearly.
Final Thoughts
Adding interactive animations like this not only enhances the aesthetic appeal of your site but also boosts user retention. Try implementing the Smokey Cursor Animation today and see the difference it makes!
For more unique effects and web design tips, stay connected with Promise Web IT.
Smokey Cursor Animation section class:
PromiseAnimationSection
CSS
position: relative;
}
.PromiseAnimationSection canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.PromiseAnimationSection div{
z-index: 5 !important;
}
javascript
// Automatically add canvas to all elements with class 'PromiseAnimationSection'
document.querySelectorAll('.PromiseAnimationSection').forEach(banner => { const canvas = document.createElement('canvas'); canvas.classList.add('fluid-canvas'); banner.appendChild(canvas); const ctx = canvas.getContext("2d"); function resizeCanvas() { canvas.width = banner.offsetWidth; canvas.height = banner.offsetHeight; } resizeCanvas(); window.addEventListener("resize", resizeCanvas); let particles = []; function Particle(x, y) { this.x = x; this.y = y; this.size = Math.random() * 10 + 5; this.life = 100; this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; this.vx = (Math.random() - 0.5) * 3; this.vy = (Math.random() - 0.5) * 3; } Particle.prototype.update = function () { this.x += this.vx; this.y += this.vy; this.size *= 0.96; this.life -= 1; }; Particle.prototype.draw = function () { ctx.beginPath(); ctx.fillStyle = this.color; ctx.globalAlpha = this.life / 100; ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1; }; function animate() { ctx.fillStyle = "rgba(0, 0, 0, 0.1)"; ctx.fillRect(0, 0, canvas.width, canvas.height); particles = particles.filter(p => p.life > 0); particles.forEach(p => { p.update(); p.draw(); }); requestAnimationFrame(animate); } banner.addEventListener("mousemove", function (e) { const rect = banner.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; for (let i = 0; i < 5; i++) { particles.push(new Particle(x, y)); } }); animate(); }); </script>
