Hi All,
This is my post after a long break. Well i have been looking into different technologies like photoshop, blend and i stopped at flash. I saw a simple and sweet animation in flash that suits excatly for displaying products.
After few days i succeeded to implement the same feature in jQuery.
So here is a sample screen-shot of how it looks like.
The slider moves up and down giving a pretty cool visual experience for viewers. The image is set a background image for the containing div element. You just need to call the slider plugin as,$("#divWithBgImage").maskedSlider({defaultOpacity : 0.6, stripHeight: 55});
That's it and the rest of the visual effects are applied by the plugin. Also the plugin has many options that it supports. Here are the list of supported options:{
defaultOpacity : 0.6,
stripHeight : 40,
topSliderColor : gray,
bottomSliderColor : gray,
duration : 2000,
horizontal : true
}
The options are self explainable. The last option specifies that the slider will move vertically if horizonal : false is specified.
Note: The function can be called only once within a page. i.e., it can be called on any div element within a page once and only once.
The problem here is - i m adding new html elements on given div and animating their height and position. If its called for more than one div then there will be a runtime conflict in the browser because the same id exists(newly added html elements thru plugin) for called div elements.
I assure you my next post will give a solution to this problem.
If any one is intrested to get the plugin, Reply me or email me at calyan.bandi@gmail.com or you can email me at buntychitti@yahoo.com
June 19, 2009
Masked Slider Plugin in jQuery
0 comments 6/19/2009 05:15:00 PM Posted by kalyan kumar B
Subscribe to:
Posts (Atom)