30. März 2009
Wie man einen schönen Portfolio Galerie mit jQuery animieren zu machen!
Geschrieben von: Mahbub In: misc
Doing eine Portfolio-Seite mit Flash auf Ihrer Website geworden Art obsolet. In diesen Tagen mit schnelleren Maschinen und neue Generation Browser kann wirklich kick some ass mit Javascript und CSS. JQuery hat sehr nette Art und Weise, mit einigen Effekten umzugehen. Alle Animationen stammen von der Basis-Methode namens "belebten". Es belebt, Tweens die Eigenschaften von DOM-Elementen. Um die lange Geschichte kurz zu machen wir einen Blick auf diese.
Also, haben Sie bereits angeklickt und sah, nicht wahr? Ok, wenn Sie auf den Code schauen, ist es ziemlich einfach.
$ (Document). Ready (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") zeigen (); $ ("Div.portfolio_div"). Schweben (function () { . $ (This) zu finden ("info_container.") Animieren ({top: "0px"}, {duration: 400, Lockerung: hover_in_easing}).; }, Function () { . $ (This) zu finden ("info_container.") Animieren ({top: "100px"}, {duration: 500, Lockerung: hover_out_easing}).; }); / / Die 100 px ist die Größe der Maske });
Es nutzt belebten Funktion, um die Maske über das Bild, das versteckt gehalten wird durch die Positionierung relativ zu animieren. Und mit Erleichterung Plugin, erreichen wir ein paar coole Wirkung von hüpfenden, wenn Sie aus dem Bild zu schweben. Sie können eine beliebige HTML-innen der info_container DIV-Elemente so lange gesetzt, da es nicht über die Grenzen gehen muss. Sehen Sie sich das Stylesheet und du wirst es sehr grammatikalischen finden. Sie können die Größe, indem Sie die div-Klassen anpassen.
Inspiration: http://dibusoft.com/portfolio
Recent Comments