20+ ukázky zobrazující pokročilé efekty JQuery
Jen krátce předtím byl Flash jednou z primárních technologií používaných webovými designéry pro přidání interaktivity na webové stránky.
Od uvedení iPadu s nedostatkem přehrávače Flash Player dochází ke zrychlení ve světě vývoje webových stránek s použitím alternativních technologií pro Flash, jako je jQuery, Ajax a další.
Přestože je Flash stále velmi účinným a užitečným nástrojem, který v mnoha případech funguje skvěle, lze několik efektů, které weboví tvůrci zvyknou vytvářet ve Flashu, stejně snadno implementovat pomocí jQuery.
Zde je 21 online ukázek, které ukazují sílu jQuery pro vytváření pokročilých efektů a interaktivity, které mohou konkurovat Flashu.
1. Flip! Plugin jQuery
Toto demo napodobuje oblíbenou techniku karty, která může otáčet prvek o 360 stupňů kolem své vlastní osy x nebo y.
2. Plugin jQuery Quicksand
Jedná se o skvělý plugin pro třídění množiny prvků / ikon na stránce s hezkými efekty vyblednutí / stmívání a animace.
3. ImageFlow
Tento prohlížeč obrázků je podobný rozhraní CoverFlow společnosti Apple, které se v různých produktech a aplikacích seznámilo.
4. Vytvoření interaktivní mapy s jQuery namísto Flash
Toto demo se připojuje k síle jQuery s Ajaxem a opravdu vytváří příjemné rozhraní.
5. Tipy pro posun s jQuery a CSS3
Kliknutím na symboly "+" se zobrazí další informace s hezkým efektem animace.
6. Galerie Zoomer
V této ukázce se zdá, že je to pravidelná statika Galerie Obrázků je poskytována nějaká mimořádná interaktivita při použití vícevrstvého efektu zoomu při pohybu nad obrazem.
7. jQuery Circulate
Tato ukázka zobrazuje mnohem více použitý efekt blesku, který obklopuje obrázek kolem stránky - vše se provádí pomocí jQuery.
8. Snímek zvětšení efektu
Toto demo vypadá klamavě jednoduché, ale při dalším vyšetření najde několik vrstev složitosti efektu zoomu.
9. Posuvné boxy a titulky s jQuery
Zde vidíme, jak výkonné přechody mohou být vytvořeny pomocí technologie jQuery, která je kdysi vyhrazena pouze vývojářům Flash.
10. Galerie CSS3 Lightbox
Tento plugin vypadá, že byl napsán speciálně pro sociální média. Přetažením a přetažením fotografie na vrcholu "sdílené schránky" se otevře modální okno, které může být rozhraním pro volání API přes AJAX, které umožní uživateli sdílet fotografii na Flickru, Twitteru, Facebooku a dalších stránkách.
11. Vytváření efektu Photoshoot pomocí jQuery & CSS
Přestože se na první pohled zdá, že toto demo může vypadat jako oko-candy, mohlo by to být velmi výkonný nástroj pro práci s velkými obrazy v kombinaci s místním úložištěm AJAX nebo HTML5.
12. Úžasná navigace s bublinkami
Zde vývojář dobře využívá barevných přechodů a animací, aby vytvořil velmi atraktivní a interaktivní menu.
13. Krásná navigace na pozadí
V této ukázce každá akce uživatele spouští několik přechodů, které všechny působí tak, aby uživatel plně vnikli do rozhraní.
14. AviaSlider
AviaSlider používá klasické přechodové efekty typu Flash, které vylepšují to, co se zdá být standardním rozhraním posuvníku.
15. Prezentace obrázků na pozadí
Animované pozadí jsou jednou z oblastí, ve kterých dominoval Flash webový design. Zde je příklad použití jQuery.
16. Prezentace prezentace
Další unikátní vzhled na typické rozhraní prezentace. Zde autor přidává diagonální navigaci, aby okorel rozhraní a vynikl.
17. jqFancyTransitions
Tento plugin lze použít k zobrazení fotografií ve formě prezentace s převládajícími přechodovými efekty typu Flash.
18. iCarousel - Posuvník horizontálních snímků
Další prezentace, která přidává jen dotek uvolnění, aby přechody skutečně vynikly. Není divu, že se rozhodli v tomto demo představit sexy produkty Mac.
19. Vytváření interaktivního obrazu s jQuery
Toto demo lze využít k využití webových stránek, kde je spousta místa na obrazovce. Kliknutím na část webové stránky se zobrazí modální políčko, které zobrazuje více informací o kliknuté sekci.
20. Cloud Zoom
Plugin, který vypadá, že byl navržen s ohledem na eCommerce. Cloud Zoom se snadno implementuje a může skutečně zlepšit zážitek uživatele.
21. Apple-like Retina Effect
Každý, kdo používal iPhone, iPod touch nebo iPad, je obeznámen s "Retina View", který zvětší malou oblast na obrazovce, když se dotýkáte oblasti delší dobu. Toto demo implementuje tento efekt pro pracovní plochu.
Kompilován výhradně pro WDD od Kalim Fleet . Je profesionálním webovým designérem a bloggerem s více než 6 let zkušeností. Web je jeho vášeň, když rozděluje čas mezi psaním blogů, vývojem softwaru a sociálními médii. Miluje používání a vývoj nových aplikací pro web, mobilní zařízení a pracovní plochu.
Víte o dalších skvělých příkladech jQuery efektů, které mohou soupeřit s výkonem Flash? Navrhoval (a) jste někdy jQuery efekty přes Flash, když je požadujete od klientů? Podělte se o níže uvedené názory a příklady!