Puffing Smoke Effect in jQuery
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.
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!
Articles like this one
49 Comments
-
Thank you for the tip/tutorial on your smoke effect!
-
YEAH I LOVE SMOKE!!!
-
amazing effect! love the WP & super mario example too!
-
Haha, the Mario example rocks.
Well done Gaya, pretty cool effect!
-
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!
-
Great tutorial, I was actually wondering will you make a tut about this effect :)
-
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
-
Pretty Cool effect! You rock gaya
-
Wow – you just earned a follower. Nice smoke effect!
-
Thanks Kawsar and Michael :D!
-
Very Nice. Thanks!
-
Haha! I just realized you can take the smoke stack and drop it off the left end of the design. Brilliant!
-
Haha, cool! Thanks buddy :)
-
This is really cool effect!! Thanks for sharing
-
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!
-
Great jQuery technique, thanks!
-
thx collect it to
ajax.wespai.com
-
Thanks Wespai :)
-
Good effect… Why the script product an error with internet explorer?
-
whoa.. very nice article ! hmm will be implement on Joomla :D
@Nicolai think internet explorer unsupported any javascript such as jquery :D
-
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.
-
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!
-
how do I make for the box can be moved? like those in this web. I really like this web design. very good. Please help me.
-
I’m not able to see do it. Can u tell me if anything is needed in body section?
-
Excellent work! If you want to see menus, web site trends, galleries, free extension and job for freelancers etc, visit http://www.1artmedia.com , you have online demo and free download. Bye!
-
Kudos for the great piece of writing. I am glad I have taken the time to read this.
-
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!
-
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?
-
Thank you, this article help to me!
-
Cool blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple adjustements would really make my blog shine. Please let me know where you got your theme. Appreciate it
-
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
-
certainly like your web-site but you need to take a look at the spelling on quite a few of your posts. Many of them are rife with spelling problems and I to find it very bothersome to inform the truth then again I will certainly come back again.
-
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.
-
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!
-
really great post… very helpful.. thnx
-
I think I just have been told about this issue at job 2 days ago by a friend, but at that time it didnt caugh my attention.
-
really awesome effect, thanks for sharing
-
Hello there, You’ve done an incredible job. I will definitely digg it and personally suggest to my friends. I’m confident they will be benefited from this website.
-
I love your wp theme, wherever do you obtain it through?
-
This webpage won’t show up correctly on my android – you may want to try and repair that
-
I was recommended this blog by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my trouble. You are amazing! Thanks!
-
Nahhh!!!! I have been browsing over the internet more than six hours today, yet I never found any interesting article like yours.if i can rate it, i would 10/10.. Thank you Fat Loss Burn
-
gayadesign is awesome =) thanx for sharing.
-
Great article I`ll definitely be back to observe your web site more frequently
-
My brother recommended I might like this website. He was totally right. This post actually made my day. You can not imagine just how much time I had spent for this information! Thanks!
-
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!
-
It is perfect time to make some plans for the future and it is time to be happy. I have read this post and if I could I desire to suggest you some interesting things or suggestions. Maybe you could write next articles referring to this article. I want to read even more things about it!
-
semoga sukses dengan kontes seo nya yaa
-
how can i put two puff in one page?
Recent comments