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):1 2 3 | <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> |
1 2 3 | <div id="smokeSpawnPoint"> <img src='uri to your image' alt='chimney' /></div> |
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:
1 2 3 4 5 | <script type='text/javascript'> SmokeEffect.imgLocation = "http://www.yoursite.com/images/smoke.png"; SmokeEffect.smokeWidth = 100; SmokeEffect.smokeHeight = 100;</script> |
Now start up the script by including the following code in the same <script> tag:
1 | SmokeEffect.makeEffect("smokeSpawnPoint", 24, 12); |
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:1 2 3 | SmokeEffect.smokeWidth = 90;SmokeEffect.smokeHeight = 70; |
Download the source code here: http://www.gayadesign.com/scripts/smokeeffect/smokeEffect.zip
View the examples here: http://www.gayadesign.com/scripts/smokeeffect/
Good luck!
0 comments:
Post a Comment