30 maaliskuu 2009
Miten kauniin salkun galleria käyttäen jQuery Animate!
Kirjoittanut: Mahbub In: misc
Doing portfolio sivun Flash sivustosi on tullut eräänlainen vanhentuneet. Nykyään nopeammin koneiden ja uuden sukupolven selain todella potkia joitakin ass Javascript ja CSS. JQuery on erittäin siisti tapa käsitellä joitakin vaikutuksia. Kaikki animaatiot johtuvat pohja sanotulla "animoida". Se animoi, Tweens ominaisuudet DOM elementtejä. Jotta pitkän tarinan lyhyesti katsomaan tätä.
Joten, olet jo valinnut ja näki oikein? Ok, jos katsotte koodia, se on melko yksinkertainen.
$ (Document). Valmiina (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; $ (". Info_container"). Show (); $ ("Div.portfolio_div"). Hääriä (function () { $ (Tämä). Löytää (". Info_container"). Animoida ({top: "0px"}, {kesto: 400, helpottaa: hover_in_easing}); } Function () { $ (Tämä). Löytää (". Info_container"). Animoida ({top: "100px"}, {kesto: 500, helpottaa: hover_out_easing}); }); / / 100 px on koko maskin });
Se käyttää elollinen toiminta elävöittää maskia kuva, joka pidetään piilossa paikannus suhteellisen. Ja helpottaa plugin, pääsemme hienoja vaikutus pomppii kun viet ulos kuvasta. Voit laittaa html sisälle info_container DIV elementtejä, kunhan se ei mene rajojen ulkopuolella. Katso tyylisivu ja löydät sen hyvin gramatical. Voit muokata kokoa muuttamalla div luokat.
Inspiraatio: http://dibusoft.com/portfolio
Viimeisimmät kommentit