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

Kommentare:

Schreibe selbst einen Kommentar »


Weitere Beiträge in dieser Kategorie:

Wer Slideshare nutzt muss jetzt sofort handeln!

Wer Slideshare auf einer deutschen Seite eingebettet hat, muss jetzt dringend handeln! Sonst besteht eine hohe Abmahnungsgefahr! Es hat sich nämlich herausgestellt, dass eine Einbindung von Slideshare-Präsentationen nach deutschem Recht datenschutzwidrig ist. Die Embedds enthalten Tracking-Codes, die Drittanbietern IP-Adresse der … Weiterlesen →

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.


Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>