Napredni JQuery efekti

Ne tako davno Flash je bio jedna od primarnih tehnologija koje su korišćene od strane web dizajnera kako bi uneli interaktivnost web strani.

Od kada je predstavljen iPad, sa svojim nedostatkom Flash Player-a, došlo je do ubrzanog korišćenja tehnologija koje su alternative Flash-u, kao što su jQuery, Ajax i druge.

Iako je Flash još uvek veoma koristan i moćan alat, koji radi odlično u većini slučajeva, jedan broj efekata koje su dizajneri navikli da prave u Flash-u, mogu biti isto tako lako implementirani i kroz jQuery.

U nastavku teksta možete pogledati 21 online demo koji prikazuju moć jQuery-ja pri kreiranju naprednih efekata i interaktivnost koja može biti rival Flash-u.

Flip! jQuery plugin

Ovaj demo imitira popularnu tehniku prevrtanja kartica koja može da rotira element 360 stepeni oko svoje x ili y ose.

01_flip-e1280313489279

jQuery Quicksand plugin

Ovo je odličan plugin za sortiranje niza elemenata/ikona na strani sa lepim fade-in/fade-out efektom i efektima animacije.

02_quicksand-e1280314124176

ImageFlow

Galerija slika koja je slična interfejsu Apple CoverFlow-a koji je postao standardan u njihovim raznim proizvodima i aplikacijama.

03_imageflow-e1280314170584

Kreiranje interaktivne mape koristeći jQuery umesto Flash-a

Ovaj demo spaja moć jQuery-ja sa Ajax-om i pravi odličan intefejs.

04_interactive_map-e1280314264353

Slideout saveti –  jQuery i CSS3

Klik na “+” simbol otkriva dodatne informacije sa lepim efektom.

05_jslideout-e1280314322236

Zoomer galerija

U ovom demu onome što izgleda da je regularna statička galerija fotografija je dodata interaktivnost koristeći multi-layer zoom efekat kada se mišem pređe preko fotografije.

06_zoomer-e1280314374522

jQuery Circulate

Demo prikazuje puno korišćeni Flash efekat cirkulisanja slika kroz stranu – sve urađeno kroz jQuery.

07_circulate-e1280314454244

Photo Zoom Out Effect

Ovaj demo izgleda jednostavno, ali nakon dublje analize videćete da tu postoji nekoliko layer-a koji doprinose kompleksnosti zoom-out efekta.

08_jpzoom-e1280314508146

Sliding boksevi sa opisima

Ovde možemo videti kako se mogu napraviti dobre tranzicije sa jQuery-jem, tehnika koja je nekada bila moguća samo u Flash-u.

09_sliding_boxes-e1280314565196

CSS3 Lightbox galerija

Ovaj plguin izgleda kao da je pisan specijalno za društvene medije. Prevlačenje fotografije na “share box” će otvoriti prozor koji može biti interfejs koji će pozvati API kroz AJAX i dalje omogućiti korisniku da šeruje fotografiju na Flickr-u, Twitter-u, Facebook-u i drugim sajtovima.

10_dragshare-e1280314621744

Photoshoot efekat  koristeći jQuery i CSS

Ovaj plugin može biti jako moćan alat za rad sa velikim slikama kada se ukomponuje sa AJAX-om ili HTML5 lokalnim smeštanjem fajlova.

11_photoshoot-e1280314677550

Navigacija sa balončićima

Ovde developer može jako lepo da iskoristi prelaz boja i animaciju čime kreira veoma atraktivan i interaktivan meni.

12_bubblemenu-e1280314726795

Navigacija sa slikom u pozadini

Kada korisnik pređe preko nekog dela u glavnom meniju pozadinska slika se takođe menja. Vrlo lepo i inovativno u web development svetu.

13_puzzlemenu-e1280314860645

AviaSlider

AviaSlider koristi tranzicije koje jako puno liče na one koje smo imali u Flash-u i na taj način kreira standarni interfejs sa slajderom.

14_aviaslider-e1280315033125

Slideshow pozadina

Animirane pozadine je oblast gde je Flash bukvalno dominirao. Evo primera gde je isto urađeno, ali kroz jQuery.

15_lgbackgroundslider-e1280315076449

Panning Slideshow

Još jedan jedinstveno urađen tipični slideshow. Autor je dodao i dijegonalnu navigaciju i tako začinio interfejs i napravio ga još više jedinstvenim.

16_panningslider-e1280315122316

jqFancyTransitions

Ovaj plugin se može koristiti da prikažete fotografije kroz slideshow sa fancy efektima nalik Flashu.

17_transitionslider-e1280315166416

iCarousel – Horizontalni slajder

Još jedan slideshow koji dodaje jednostavnost u kreiranju jedinstvenih tranzicija. Nije ni čudo što su izabrani sexy Mac proizvodi za ovaj demo.

18_icarousel-e1280315209833

Interaktivna fotografija kroz jQuery

Ovaj demo se može iskoristiti na sajtovima gde ima dosta prostora na ekranu. Klikom na određenu sekciju sajt otkriva box koji prikazuje više informacija o izabranoj sekciji.

19_interactivepic-e1280315259444

Cloud Zoom

Plugin koji kao da je dizajniran sa eCommerce sajtovima na umu. Cloud Zoom se lako implementira i može dosta poboljšati korisnikov doživljaj web sajta.

20_cloudzoom-e1280315320455

Apple retina efekat

Ko god da je koristio iPhone, iPod touch ili iPad zna šta znači “Retina View” koji uveličava mali deo ekrana kada dodirnete taj deo ekrana na jedan duži period. Ovaj demo implementira taj efekat.

21_applezoom-e1280315366435

Tags: , , , ,

No comments yet.

Submit Comment