 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
How to work with the VSK Shadow effect
written by vegu on 09 Apr, 2007 04:13:34
The VSK Shadow effect allows you to add a static shadow effect to any absolute or relative positioned html node in your document.The shadow effect itself is being created by the addition of a node that is "glued" to the node it is attached to. When i say glued i mean it will move and resize with the node it belongs to.
In order to utilize the effect make sure the vegui.sk.ani.shadow.js library is loaded as well as any other libraries the effect is dependent on. You can check which files those are in the online documentation of VSK or the VSK Effect: Shadow page.
You apply the affect by calling the VSK_Node's fx_shadow method.
code: js/* create VSK_Node object that is control of the node that you would
* like to apply the shadow effect on
*/
var n = v(node);
/* call the fx_shadow function to create the shadow effect */
n.fx_shadow(15,'#000',5,5);
The first argument we submit to the function is the opacity, it needs to be a value from 1 to 100 (ie 1 to 100 percent), where 100 is completely solid and 1 is barely noticeable. The second argument is the color we want the shadow to be, this is a css value which means you can either use '#000000' or 'black', but make sure you submit it as a string.
The third and fourth arguments are the offset positions (x and y respectively) of the shadow. In our example our shadow's offset is 5 pixels on both axis, which will make it look like the light is coming from the upper left corner of the screen. To produce the opposite effect - the light coming from the lower right - we would submit them as -5, -5 instead.
Once applied the shadow effect maintains itself. It will reposition and resize with the node as long as the move() and resize() methods are used to change position and proportions of the node. When the node is removed from the document the effect will be halted and will need to be reapplied manually should the node be re-appended to the document.
Also, you can adjust the shadow effect manually at anytime by calling the fx_shadow_adjust() method.
Related Posts
- No related posts
Your Comment
Comments
No comments yet.
