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
21 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.
Recent comments