Efect logo cu jQuery
Ian 2012 14

Exista foarte multe metode pentru adaugarea unui efect logo-ului dumneavoastra, de cele mai multe ori vedem un efect static realizat cu ajutorul unui program de grafica, photoshop, illustrator sau chiar corel, dar de ce sa nu ne gandim si la jquery ? Mereu aud aceiasi intrebare, ce as putea face cu logo-ul meu ? Un efect cu hover ? Bineinteles, este posibil dar cel mai apropiat de flash este jquery, ii poate da o animatie exceptionala, asa ca va vom arata o metoda simpatica, deloc complicata pentru a avea un logo mai atragator pe website-ul dumneavoastra.

1. Pentru inceput trebuie pluginul de jquery care poate fi luat de aici http://code.jquery.com/jquery-1.4.4.js si adaugat in sursa paginii dvs. (in cazul wordpress poate fi adaugat in header.php).

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>

 
2. Odata ce avem pluginul jquery incepem prin a realiza javascriptul

$("#solidgiant_logo li").hover(function() {
var e = this;
$(e).find("a").stop().animate({ marginTop: "-20px" }, 100, function() {
$(e).find("a").animate({ marginTop: "-14px" }, 150);
});
$(e).find("img.shadow").stop().animate({ width: "80%", height: "60px", marginLeft: "30px", opacity: 0.50 }, 150);
},function(){
var e = this;
$(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
$(e).find("a").animate({ marginTop: "0px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "100%", height: "60px", marginLeft: "0", opacity: 1 }, 250);
});

 
3. Asa cum vom face si cu codul css care urmeaza, bine ar fi sa il facem hover.js dupa care sa ii introducem sursa in pagina

<script type="text/javascript" src="hover.js"></script>

 
4. Avand codul javascript trebuie sa avem si css-ul pentru a fi asezat in pagina asa cum vrem noi

#solidgiant_logo li {
width: 261px;
height: 301px;
position: relative;
float: left;
}
#solidgiant_logo a, #solidgiant_logo a:visited, #solidgiant_logo a, #solidgiant_logo a:hover {
margin: 0 auto;
width: 261px;
height: 301px;
text-indent: -9999px;
overflow: hidden;
background: url(../images/g_logo.png) no-repeat;
display: block;
position: relative;
z-index: 2;
}
#solidgiant_logo li img.shadow {
margin: 0 auto;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}

 
5. Totusi recomand codul css sa fie intr-un fisier style.css si adaugat in pagina

<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>

 
Asta a fost tot, deloc greu !
Nu uitati sa lasati si un comentariu daca va fost de folos !
 
Pentru cei care doresc sa descarce sursa gata realizata, va punem la dispozitie intreaga arhiva demo.

 
 

Scrie un comentariu