Web Design Ieftin

0765 297 688

0

Efect “page peel” prin jQuery

» Scris in categoria: JQuery, Scripturi Utile — @ 11:55

 

Banner/Reclama in coltul site-ului (Page Peel)

Sunt sigur ca toti ati vazut acel efect intr-un colt dreapta al site-ului de genul celui care l-am folosit aici:http://www.sibiu.name/anunturi/
Desi parca varianta flash parca e mai “cool” este mai greu de creat/implementat chiar si de modificat daca gasiti o varianta free pe net.O solutie frumoasa si mult mai usoara este folosirea jQuery pentru acest efect. Pentru asta aveti nevoie de urmatoarele coduri:

1. Partea de HTML

Pentru inceput trebuie sa introduceti reclama intr-un container (pentru a evita eventuale conflicte de pozitionare) si de un block de continut cu o poza.

<div id="efect_peel">
	<a href="#">
		<img src="efect_peel.png" alt="" />
		<span class="bloc">Web Design</span>
	</a>
</div>

2. Partea de CSS

Acum trebuie sa stilizam si sa ascundem putin acest container prin CSS.

#efect_peel {
	position: relative;
}
#efect_peel img {
	width: 50px; height: 52px; //* Putin mai mare pentru umbra *//
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#efect_peel .bloc {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	right: 0; top: 0;
	background: url(webdesign.png) no-repeat right top;
	text-indent: -9999px;
}

3. Partea de jQuery

In final trebuie sa introduceti scriptul jQuery impreuna cu libraria jQuery intre <head></head> pentru a adauga efectul de peel.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#efect_peel").hover(function() { //On hover
	$("#efect_peel img , .bloc").stop()
		.animate({ //Modifica dimensiunile imaginii si ale blocul din acel bloc (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#efect_peel img").stop() //Cand luati mouse-ul de pe el sa revina la dimensiunea de 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".bloc").stop() //Cand luati mouse-ul de pe el sa revina la dimensiunea de 50x50
		.animate({
			width: '50px',
			height: '50px'
		}, 200); //Acesta se va retrage putin mai repede ptr a nu arata urat in IE
     });
});
</script>
Imaginea folosita de mine in exemplu o puteti lua de aici:

 



Comentarii (0)

Lasă un răspuns

Ultimele Articole

Categorii

  • COMENTARII RECENTE
  • Cristina B: N-am pag. web, dar doresc sa-mi fac una prin forte proprii. N-am nici suficienti bani sa platesc asemenea...
  • admin: adauga: background-repeat: repeat;
  • Mihnea: am si eu o problema am incercat cu background-image:url(”); dar imi afiseaza imaginea doar pe o bucata...
  • Florin: foarte interesant articolul
  • Web Design: Un articol bun

Web Design: Oferta Lunii martie

Magazin Online doar 300 euro