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)

0

Schimbare DIV si Imagine cu JQuery

» Scris in categoria: JQuery, JavaScript — @ 6:30

JQuery este o biblioteca, o platforma de dezvoltare javascript  care imbunatateste procese precum transferarea arborelui DOM in HTML si care iti usureaza foarte mult munca, reducand lucrul cu acel cod Javascript pur.

Avantajele JQuery sunt foarte multe, printre ele fiind si dimensiunea redusa a codului (scriptul JQuery fiind foarte mic) cat si compatibilitatea cu aproape toate browserele.

Voi posta de acum inainte mai multe articole despre JQuery, dar trebuie sa incepem cumva si am ales un script prin care puteti schimba continului unui DIV (fara a reincarca pagina), un text, cat si atributele unei imagini (src, sau orice alt atribut). …vezi scriptul si exemplu



Comentarii (0)

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