ShineTime: jQuery & CSS3 Gallery With Animated Shine Effects

This week I’d like to show you how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.

The animated Shine Effect

The idea behind a Shine Effect is to give your graphics the appearance of being on a glossy surface that have just had a light beam pass over them. This can make them appear to be made of glass and can increase the visual experience your end users see.

Before we get into any code, lets go through the basic concepts behind the effect. We want to pass a light-beam (in this case an image simulating a shine) past our image when the user hovers over it. Now because I wanted to style up today’s gallery so that each thumbnail appeared to float out of it’s container, the steps to achieving the below animation are as follows:
1. Change the margins of the thumbnail element so that it floats away from it’s container
2. Set the background-position of your “shine” graphic to be –1 * (it’s total width)
3. Animate your background-position to value of the total width. Effectively we’re hiding the gloss off-stage and then animating it across the image.
Author: Addy Osmani

Download: From Here

Related Posts:
GD Star Rating
loading…
August 8th, 2010 | Blue | 1 Comment | Tags: css3, jquery

About The Author

Steve

Hi I am a webdeveloper based in Brisbane, Australia. Fanatical about the internet and website code and development. Hence this site, a showcase resource site for you to get the latest greatest code , scripts , apps and demos all from the one venue.

One Response and Counting...

Site Help 08.08.2010

Site Help New Post – ShineTime: jQuery & CSS3 Gallery With Animated Shine Effects. Read it now at http://bit.ly/9C7aZO
Reply

GD Star Rating
loading...