CLIENT: Second Nature
CLIENT: Ungureanu Imobiliare
CLIENT: Agriferma
CLIENT: Bere Bauturi Bucuresti
CLIENT: Fatal Beauty Studio
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).
2. Odata ce avem pluginul jquery incepem prin a realiza javascriptul
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
4. Avand codul javascript trebuie sa avem si css-ul pentru a fi asezat in pagina asa cum vrem noi
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
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.
