Dělat portfolia stránku s Flashem na vašich webových stránkách se stal druhem zastaralý. V těchto dnech s rychlejšími stroji a nové generace prohlížeče může opravdu nakopat prdel s Javascript a CSS. JQuery má velmi elegantní způsob, jak řešit některé efekty. Všechny animace vycházejí ze základní metodou zvanou "živé". To oživuje, doplnění vlastností prvků DOM. Chcete-li dlouhý příběh krátký podívat na tohle.
Takže jste už klikli a viděl v pořádku? Ok, když se podíváte na kód, je to docela jednoduché.
$ (Document). Ready (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") show (); $ ("Div.portfolio_div"). Pohybovat (function () { . $ (This) find ("info_container.") Animaci ({top: "0px"}, {délka: 400, uvolnění: hover_in_easing}).; } Function () { . $ (This) find ("info_container.") Animaci ({top: "100px"}, {délka: 500, uvolnění: hover_out_easing}).; }); / / 100 px je velikost masky });
Používá živé funkce animovat masku přes obraz, který je veden skrytý umístění relativně. A usnadnění plugin, můžeme dosáhnout nějaké cool efekt poskakování, když podržíte z obrázku. Můžete vložit jakýkoliv HTML uvnitř DIV prvky info_container pokud to nepřekračuje hranice. Podívejte se na stylů a najdete ho velmi gramatické. Můžete přizpůsobit velikosti úpravou div třídy.
Inspirace: http://dibusoft.com/portfolio
Nedávné komentáře