30 maart 2009
Hoe maak je een mooie portfolio galerij met behulp van jQuery Animate te maken!
Geplaatst door: Mahbub In: misc
Het doen van een portfolio pagina met Flash op uw website is uitgegroeid tot soort van in onbruik geraakte. Deze dagen met snellere machines en nieuwe generatie browser kan some ass echt schoppen met Javascript en CSS. JQuery heeft een zeer nette manier om te gaan met sommige effecten. Alle animaties komen voort uit de basis methode genaamd 'bezield'. Het bezielt, tweens de eigenschappen van DOM elementen. Om een lang verhaal kort te maken neem een kijkje op deze.
Dus, heb je al geklikt en zag toch? Ok, als je kijkt naar de code, het is vrij eenvoudig.
$ (Document). Ready (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") laten zien (); $ ("Div.portfolio_div"). Zweven (function () { . $ (This) te vinden ("info_container.") Animeren ({top: "0px"}, {duration: 400, het verlichten van: hover_in_easing}).; } Functie () { . $ (This) te vinden ("info_container.") Animeren ({top: "100px"}, {duration: 500, het verlichten van: hover_out_easing}).; }); / / De 100 px is de grootte van het masker });
Het maakt gebruik van levende functie om het masker laten bewegen over het beeld dat wordt verborgen gehouden door de positionering relatief. En met het verlichten van plug-in, bereiken we een aantal leuke effect van stuiteren wanneer u de muis uit het beeld. U kunt een html in de info_container DIV-elementen, zolang het niet verder gaat dan de grenzen. Kijk naar de stylesheet en vind je het erg grammaticale. U kunt de maten door aanpassing van de div klassen.
Inspiratie: http://dibusoft.com/portfolio
Recente Reacties