30 Mar, 2009
Come fare una bella galleria portafoglio utilizzando jQuery Animate!
Inviato da: Mahbub In: misc
Fare una pagina portafoglio con Flash sul vostro sito web è diventato tipo di obsolete. In questi giorni con macchine più veloci e il browser di nuova generazione può davvero calci in culo con Javascript e CSS. JQuery ha modo molto ordinato a che fare con alcuni effetti. Tutte le animazioni derivano dal metodo di base denominata "animate". Esso anima, le interpolazioni le proprietà degli elementi DOM. Per rendere la lunga storia breve dare un'occhiata a questo.
Allora, avete già cliccato e ho visto giusto? Ok, se si guarda il codice, è abbastanza semplice.
$ (Document). Ready (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") show (); $ ("Div.portfolio_div"). Hover (function () { . $ (This) find ("info_container.") Animate ({top: "0px"}, {duration: 400, facilitando: hover_in_easing}).; }, Function () { . $ (This) find ("info_container.") Animate ({top: "100px"}, {duration: 500, facilitando: hover_out_easing}).; }); / / La 100 px è la dimensione della maschera });
Si utilizza la funzione animate per animare la maschera sopra l'immagine che viene tenuto nascosto dal posizionamento relativamente. E con andamento plugin, otteniamo un effetto fresco di rimbalzo quando si sposta fuori dall'immagine. È possibile inserire codice HTML all'interno degli elementi DIV i info_container fintanto che non va al di là dei confini. Guarda il foglio di stile e lo troverai molto grammaticali. È possibile personalizzare le dimensioni modificando le classi div.
Ispirazione: http://dibusoft.com/portfolio
Commenti recenti