Bling Bling Effekt mit jQuery

Ich habe für ein neues Projekt länger nach einem “Bling Bling” Effekt für jQuery gesucht, der einem Bild den Eindruck geben kann, als würde es von einer Glasoberfläche bedeckt werden und jemand würde die Fläche hin und wieder leicht wenden, so dass darin Spiegelungen zu sehen scheinen (siehe Video). Eines Tages zeigte mir dann meine Kollegin ShineTime.

Eigentlich ist ShineTime eine Fotogallerie mit netten jQuery Effekten — beinhaltet aber eben diesen Effekt den ich so lange gesucht habe! Wenn ich mir für meine Zwecke den Code dazu aber anschaue, werde ich gleich von einer Lawine an jQuery code überrollt. Also habe ich den Code wirklich auf das wesentlichste abgespeckt und möchte euch zeigen, wie einfach dieses “Bling Bling” umgesetzt werden kann.

Das JavaScript

<script type="text/javascript">
jQuery(document).ready(function() {	 
	 /* When a thumbnail is hovered over do shine */
	$('.large_thumb').hover(function()
	{  
		$(this).find(".large_thumb_shine").css("background-position","-99px 0"); 
		$(this).find(".large_thumb_shine").animate({ backgroundPosition: '99px 0'},700);		 
	});
		 
	/* endless shine repeating - starting itself */
	setInterval(function() {
	   $('.large_thumb').find(".large_thumb_shine").css("background-position","-99px 0"); 
	   $('.large_thumb').find(".large_thumb_shine").animate({ backgroundPosition: '99px 0'},700);
	 }, 3000);
});
</script>

HTML

<div class="large_thumb"> 
   <img src="/images/beta-button.png" class="large_thumb_image" alt="thumb" /> 
   <div class="large_thumb_shine"></div>
</div>

CSS

.large_thumb{
	float:left; 
	position: relative; 
	width:74px; height:74px; 
	padding:0px 10px 0px 0;
}
img.large_thumb_image{
	position:absolute; 
}
.large_thumb_shine	{
	width:74px; height:74px; 
	background:url('/images/beta-shine.png') no-repeat; 
	position:absolute; 
	background-position:-150px 0;

        /* nur notwendig wenn der Button rund ist */
	-moz-border-radius: 37px;
	-webkit-border-radius: 37px;
	border-radius: 37px;
}

voila!
Eine DEMO gibt es derzeit auf vaxo.de