SMOKING EFFECT USING JQUERY

[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 : http://hotels-b2b.com/biryani/

[OsaMasw]

you can try this tutorial

http://dhirajkumarsingh.wordpress.com/2012/07/31/animated-smoke-effect-hot-coffee-tea-jquery-css/

[fireburner29]

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

[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.

[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/

[fireburner29]

thank you @OsaMasw and @Taywin