30 Mar, 2009
Как да си направите красива галерия портфолио с помощта на JQuery Анимирайте!
Публикувано от: Mahbub В: Разни
Прави портфейл страница с Flash на вашия сайт е станала вид на остаряло. Тези дни с по-бързи машини и ново поколение браузър наистина може да сритаме няколко задника с Javascript и CSS. JQuery има много чист начин да се справят с някои ефекти. Всички анимации произтичат от основата на метод, наречен "живата". Той съживява, tweens свойствата на елементите дом. За да направите дълга история кратко един поглед на това.
И така, вече сте кликнали и видях право? Добре, ако се вгледате в кода, това е доста проста.
$ (Документ). Готова (функция () { VAR hover_in_easing = "easeOutExpo"; VAR hover_out_easing = "easeOutBounce"; $ ("Info_container"), показват (); $ ("Div.portfolio_div"). Мишката (функция () { $ () ("Info_container.") Анимирате ({върха: 0px "}, {Продължителност: 400, облекчаване: hover_in_easing}).; }, Функция () { $ () ("Info_container.") Анимирате ({върха: "100px"}, {Продължителност: 500, облекчаване: hover_out_easing}).; }); / / 100 пиксела е размерът на маската });
Той използва живата функция, за да анимирате маска върху изображението, което се пази скрит от относително позициониране. И с облекчаване на плъгин, ние постигаме някакъв страхотен ефект от подскачащи, когато мишката от картинката. Можете да поставите всяко HTML вътре DIV info_container елементи, докато тя не отива отвъд границите. Вижте стилове и вие ще го намерите много gramatical. Можете да персонализирате размери чрез модифициране на DIV класове.
Вдъхновение: http://dibusoft.com/portfolio
Скорошни коментари