Member Avatar for fireburner29

Hi,
I would like to put steam effect on my home page.
How to make animated steam effect using jquery?
Please help me.
My Website :

  • 3 Contributors
  • 5 Replies
  • 1K Views
  • 5 Months Discussion Span
  • Latest Post Latest Post by fireburner29

Dani AI

Generated

Building on and pointing out that a larger smoke sprite and viewport sizing help, the most reliable way to get steam that spreads is to spawn many small particles and randomize each particle's horizontal offset, rotation, size and duration. Use GPU-friendly transforms (translate3d, scale, rotate), animate opacity and blur, and remove particles after animation to avoid DOM buildup. The code below is a compact, modern pattern that works in a single #viewport and lets the steam drift outward in all directions.

.smoke-particle {
  position: absolute;
  bottom: 60px;
  width: 40px;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.9), rgba(255,255,255,0));
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
  will-change: transform, opacity;
  animation: rise var(--dur, 4000ms) linear forwards;
}

@keyframes rise {
  0%   { opacity: 0; transform: translate3d(0,0,0) scale(0.6) rotate(0deg); }
  18%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), -260px, 0) scale(1.6) rotate(var(--r, 0deg)); filter: blur(12px); }
}
// jQuery spawner (set interval tuned for moderate particle count)
var spawner = setInterval(function(){
  var dur = 3000 + Math.random()*2500;
  var dx  = (Math.random()*400 - 200) + 'px';
  var rot = (Math.random()*40 - 20) + 'deg';
  var left = (50 + (Math.random()*30 - 15)) + '%';
  var $p = $('<div class="smoke-particle"></div>').css('left', left);
  $('#viewport').append($p);
  var el = $p.get(0);
  el.style.setProperty('--dx', dx);
  el.style.setProperty('--r', rot);
  el.style.setProperty('--dur', dur + 'ms');
  setTimeout(function(){ $p.remove(); }, dur + 200);
}, 180);

Notes: keep spawn rate, particle size and blur modest for good performance; prefer a canvas-based particle system when thousands of particles are needed. For older browsers without CSS custom properties, predefine several lateral classes (dx1..dxN) and assign one randomly instead of using --dx.

Recommended Answers

All 5 Replies

Member Avatar for fireburner29

hey alredy i using this. but the thing is the smoke should spread all side.
please help me to make this

Member Avatar for Taywin

If you look at how the CSS work, you would see that the width of smoke image of CSS is being set to 250px. The JQuery is used to display the smoke, but not sizing it. You have to update the viewport .smoke in CSS yourself. Increase the width, margin-top, margin-left, and height of the display to match the viewport.

Edited by Taywin
Member Avatar for OsaMasw

if you resize the picture for smoke in #viewport .smoke and edit the css to match the new size

#viewport .smoke {
  position: absolute;
  width: 800px;
  height: 800px;
  background:url('http://i.imgur.com/pVI5HbP.png') no-repeat;
  bottom: 230px; 
  margin-left:10px
}

you'll get larger smoke area
see the live example : http://jsfiddle.net/hawkiq/me1nupf5/

Edited by OsaMasw
Member Avatar for fireburner29

thank you and

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.