Напредни JQuery ефекти

Не тако давно Flash је био једна од примарних технологија које су коришћене од стране веб дизајнера како би унели интерактивност веб страни.

Од када је представљен iPad, са својим недостатком Flash Player-а, дошло је до убрзаног коришћења технологија које су алтернативе Flash-у, као што су JQuery, Ajax и друге.

Иако је Flash још увек веома користан и моћан алат, који ради одлично у већини случајева, један број ефеката које су дизајнери навикли да праве у Flash-у, могу бити исто тако лако имплементирани и кроз JQuery.

У наставку текста можете погледати 21 онлајн примера који приказују моћ JQuery-ја при креирању напредних ефеката и интерактивност која може бити ривал Flash-у.

Flip! JQuery плагин

Овај демо имитира популарну технику превртања картица која може да ротира елемент 360 степени око своје x или y осе.

01_флип-е1280313489279

JQuery Quicksand плагин

Ово је одличан плагин за сортирање низа елемената/икона на страни са лепим fade-in/fade-out  ефектом и ефектима анимације.

02_qуицксанд-е1280314124176

ImageFlow

Галерија слика која је слична интерфејсу Apple CoverFlow-а који је постао стандардан у њиховим разним производима и апликацијама.

03_имагефлоw-е1280314170584

Креирање интерактивне мапе користећи JQuery уместо Flash-а

Овај демо спаја моћ JQuery-ја са Ajax-ом и прави одличан интефејс.

04_интерацтиве_мап-е1280314264353

Slideout савети –  JQuery и CSS3

Клик на “+” симбол открива додатне информације са лепим ефектом.

05_јслидеоут-е1280314322236

Zoomer галерија

У овом дему ономе што изгледа да је регуларна статичка галерија фотографија је додата интерактивност користећи multi-layer зум ефекат када се мишем пређе преко фотографије.

06_зоомер-е1280314374522

jQuery Circulate

Демо приказује пуно коришћени Flash ефекат циркулисања слика кроз страну – све урађено кроз jQuery.

07_цирцулате-е1280314454244

Photo Zoom Out Effect

Овај демо изгледа једноставно, али након дубље анализе видећете да ту постоји неколико layer-а који доприносе комплексности zoom-out ефекта.

08_јпзоом-е1280314508146

Sliding боксеви са описима

Овде можемо видети како се могу направити добре транзиције са jQuery-јем, техника која је некада била могућа само у Flash-у.

09_слидинг_боxес-е1280314565196

CSS3 Lightbox галерија

Овај плагин изгледа као да је писан специјално за друштвене медије. Превлачење фотографије на “share box” ће отворити прозор који може бити интерфејс који ће позвати API кроз AJAX и даље омогућити кориснику да шерује фотографију на Flickr-у, Twitter-у, Facebook-у и другим сајтовима.

10_драгсхаре-е1280314621744

Пхотосхоот ефекат  користећи jQuery и CSS

Овај плагин може бити јако моћан алат за рад са великим сликама када се укомпонује са АЈАX-ом или HTML5 локалним смештањем фајлова.

11_пхотосхоот-е1280314677550

Навигација са балончићима

Овде девелопер може јако лепо да искористи прелаз боја и анимацију чиме креира веома атрактиван и интерактиван мени.

12_бубблемену-е1280314726795

Навигација са сликом у позадини

Када корисник пређе преко неког дела у главном менију позадинска слика се такође мења. Врло лепо и иновативно у веб девелопмент свету.

13_пуззлемену-е1280314860645

AviaSlider

AviaSlider користи транзиције које јако пуно личе на оне које смо имали у Flash-у и на тај начин креира стандарни интерфејс са слајдером.

14_авиаслидер-е1280315033125

Slideshow позадина

Анимиране позадине је област где је Flash буквално доминирао. Ево примера где је исто урађено, али кроз jQuery.

15_лгбацкгроундслидер-е1280315076449

Panning Slideshow

Још један јединствено урађен типични slideshow. Аутор је додао и дијегоналну навигацију и тако зачинио интерфејс и направио га још више јединственим.

16_паннингслидер-е1280315122316

jqFancyTransitions

Овај плaгин се може користити да прикажете фотографије кроз slideshow са фенси ефектима налик Flash-у.

17_транситионслидер-е1280315166416

iCarousel – Хоризонтални слајдер

Још један slideshow који додаје једноставност у креирању јединствених транзиција. Није ни чудо што су изабрани Mac производи за овај демо.

18_ицароусел-е1280315209833

Интерактивна фотографија кроз jQuery

Овај демо се може искористити на сајтовима где има доста простора на екрану. Кликом на одређену секцију сајт открива бокс који приказује више информација о изабраној секцији.

19_интерацтивепиц-е1280315259444

Cloud Zoom

Плагин који као да је дизајниран са eCommerce сајтовима на уму. Cloud Zoom се лако имплементира и може доста побољшати корисников доживљај веб сајта.

20_цлоудзоом-е1280315320455

Apple retina ефекат

Ко год да је користио iPhone, iPod touch или iPad зна шта значи “Retina View” који увеличава мали део екрана када додирнете тај део екрана на један дужи период. Овај демо имплементира тај ефекат.

21_апплезоом-е1280315366435

Tags: , , , , ,

Нема коментара.

Пошаљи коментар