Puffing Smoke Effect in jQuery

in: DIY, has 140 Comments and is tagged: , , , ,

Since the launch of the new looks, I’ve been getting some requests on how to make the puffing smoke effect that you can see in the header.

Thinking it might be a funny effect, I’d like to take this opportunity to discuss this effect.

Puffing Smoke Effect in jQuery

Download Get the code to puff Example View the puffs

Download the source code here: http://www.gayadesign.com/scripts/smokeeffect/smokeEffect.zip

View the examples here: http://www.gayadesign.com/scripts/smokeeffect/

As you can see on the example page, you can selected different types of smoke that will adjust the effect while keeping the code intact.

Creating this fun jQuery effect doesn’t take too much effort. I am going to quickly go through the steps of using this effect to show you how easy it can be.

Usage

Using this script takes just a few small steps. Enter the following code in the <head> section of your HTML page (remove jQuery if you already included that):

<link href='css/smokePuff.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script src="js/smokeEffect.js" type="text/javascript"></script>

Next up is to put something in the page that will puff the smoke, I used the chimney from my home page. Include the following in your HTML:

<div id="smokeSpawnPoint">
    <img src='uri to your image' alt='chimney' />
</div>

Now it's time to make the Javascript call and set up the smoke.

First we're going to set the URI to the smoke / cloud image and the size in pixels.
Place this after the HTML from above:

<script type='text/javascript'>
    SmokeEffect.imgLocation = "http://www.yoursite.com/images/smoke.png";
    SmokeEffect.smokeWidth = 100;
    SmokeEffect.smokeHeight = 100;
</script>

Make sure the values match your smoke image. The smoke image is preferably a PNG image to make the effect look better and to be able to see the background. If you have a solid colour background, you can also use other formats.

Now start up the script by including the following code in the same <script> tag:

SmokeEffect.makeEffect("smokeSpawnPoint", 24, 12);

The first parameter is the id of the element the smoke has to come from. The next 2 are the position from the top-left of the element where the smoke has to start. First is X then Y.

So if you have an image of a chimney like me, the starting point is 24px to the right and 12px down from the top-left. Play with the values to get it right.

And that's it! Another easy effect on your web page!

Extra!

If you want to change the kind of smoke coming out of the spawn point you can use this code to change it into another image:

SmokeEffect.imgLocation = "http://www.yoursite.com/images/otherSmoke.png";
SmokeEffect.smokeWidth = 90;
SmokeEffect.smokeHeight = 70;

You can change this dynamically whenever you want.

Good luck!

Liked this article? Sharing is caring!

Google Plus

140 Comments on this subject

  5. Teddy said:

    Wow, amazing tutorial and thank you so much for sharing it. Congratulations for the new layout – it’s looking better than ever. I dig the smoke puff effect as well – let alone the mario one (simply imagining the chimneys being replaced with green, cylindrical tubes gets me exctied).

    Thanks for sharing!

    Reply to Teddy
  7. Gaya said:

    Thanks for the kind comments all!

    Great to see all the people who like the Mario thing haha.

    @B.Moore, Aki, Marco, Janko: Thanks for checking it out and commenting :) appreciate it very much!

    @Sieb: I know you do ;)

    @Teddy: Thanks about the design! I was thinking about changing the chimneys into pipes once you choose the mario example :P but that might have been a bit too much :D

    Reply to Gaya
  15. betsy said:

    this is great! any tutorial in the works to demonstrate how to add multiple smoke puffs to one chimney? (i want to modify the code to include several different images from one spawn image with several different spawn points) thanks!

    Reply to betsy
  21. Multiple Images said:

    FW: (i want to modify the code to include several different images from one spawn image with several different spawn points)

    Yes this would be absolutely neccessary to not become a boring effect, maybe the author can modify the script to work with a JS array of images, so that one can use more than just one that always just repeats.

    Reply to Multiple Images
  22. carl webb said:

    This is great, just what I was looking for! I was wondering how I should change the code if I wanted the smoke to stay the same size fro start to finish instead of growing as the animation progresses. I have messed around a little with the code to no avail (me being a js dummy!) Thanks again!

    Reply to carl webb
  27. Test2 said:

    I like the valuable info you provide in your articles. I will bookmark your weblog and check again here frequently. I’m quite certain I’ll learn plenty of new stuff right here! Good luck for the next!

    Reply to Test2
  28. Sonic said:

    Good script! Thank you!

    But what about IE? In IE (any version) there is something like dark blue border around cloud, even in 8-bit png.

    How can i resolve it?

    Reply to Sonic
  31. unsecured loans online said:

    Many thanks sharing superb informations. Your websiteis so cool.We are astounded by the important points that you’ve for this blog. It reveals how nicely someone perceives this subject. Bookmarked this website page, arrive backfor extra articles. You, my mate, ROCK! I discovered this is the info I already searched all over the place and merely couldn?t discover. That of a ideal website. I prefer this web site as well as your website is without question considered one of my new favorite ones.I love this site given and contains given me some kind of dedication achievement for some purpose, so thanks

    Reply to unsecured loans online
  33. Jhon said:

    Its like you read my mind! You appear to know so much about this, like you wrote the book in it or something. I think that you could do with a few pics to drive the message home a little bit, but instead of that, this is magnificent blog. A fantastic read. I will definitely be back.

    Reply to Jhon
  34. Tequila Ponce said:

    Greetings! Quick question that’s completely off topic. Do you know how to make your site mobile friendly? My weblog looks weird when viewing from my iphone 4. I’m trying to find a template or plugin that might be able to fix this problem. If you have any recommendations, please share. Thank you!

    Reply to Tequila Ponce
  46. Niki Jerich said:

    Howdy! I know this is kinda off topic but I’d figured I’d ask. Would you be interested in exchanging links or maybe guest authoring a blog post or vice-versa? My blog addresses a lot of the same subjects as yours and I think we could greatly benefit from each other. If you are interested feel free to shoot me an e-mail. I look forward to hearing from you! Kudos!

    Reply to Niki Jerich

Leave your reply

Your email address will not be published. Avatars through Gravatar.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>