I need to replicate a focus light effect which was done in flash. Here is the link.
When you hover the menu items a focus light effect will appears.
How to do this without using flash. Any plugins available? any tips or samples in jQuery or HTML5 will be helpful.
Thanks.
Assuming that you want this effect to happen on hover, we will use a class 'spotlight'
Your page will need 2 divs to make this work and will only really work with css3/jquery
First div will create the effect of the light. Create that using a 3 part css horizontal gradient. Each of the colors should be RGB so you can include a transparency. This div will be tall and narrow to start and will be hidden on the page
The second div will be used to create he effect of the element getting lit up. This will be a short and wide div with a border radius making it an oval and then a box shadow giving it the glow.
When the hover event is detected a few things need to happen:
1st you need to get the position of the element then get the position of the top center of the browser. you will use those 2 points to calculate the angle needed to skew the "light" div. Then position the light dive at the top center of the browser with the skew set and unhide it. At this point you will use css transform mixed with jquery animate to make the bottom of the box wider to give the appearance of widening the spot light.
At the same time this is happening you will want to position the "glow" box behind the element and then animate it getting larger as the spot light widens.
Then on hover out do it in reverse order and hide the elements again.