Att göra en portfölj sida med Flash på din webbplats har blivit typ av föråldrade. Dessa dagar med Snabbare maskiner och ny generation webbläsare kan verkligen sparka några röv med Javascript och CSS. JQuery har mycket snyggt sätt att ta itu med vissa effekter. Alla animeringar härrör från basen metod som kallas "levande". Det animeras, tweens egenskaper DOM element. För att göra lång historia kort ta en titt på detta.
Så har du klickat redan och såg rätt? Ok, om man tittar på koden så är det ganska enkelt.
$ (Document). Klar (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") visar (); $ ("Div.portfolio_div"). Svävar (function () { . $ (This) HITTA ("info_container.") Animera ({Top: "0px"}, {duration: 400, lätta: hover_in_easing}). }, Function () { . $ (This) HITTA ("info_container.") Animera ({Top: "100px"}, {duration: 500, lätta: hover_out_easing}). }); / / Den 100 px är storleken av masken });
Den använder levande funktion för att animera masken över bilden, som hålls gömd genom att placera relativt. Och med lätta plugin uppnår vi några coola effekten av studsande när du håller ut från bilden. Du kan sätta några html inuti info_container DIV elementen så länge det inte går utöver gränserna. Titta på stylesheet och du hittar det mycket gramatical. Du kan anpassa storleken genom att ändra div klasserna.
Inspiration: http://dibusoft.com/portfolio
Senaste kommentarer