24 chytrých webových stránek, které kombinují JQuery a ilustrace
Díky možnosti JavaScriptu se slova "dynamické" a "ilustrace" již nevztahují pouze na webové stránky založené na formátu Flash.
Nyní, když dynamický HTML je realitou v nejčastěji používaných prohlížečích a existuje mnoho fantazijních knihoven jazyka JavaScript, které usnadňují používání, mohou CSS webové stránky vzít zpět některé z uličních názorů, které tak Flash pevně drží.
Z těchto nových knihoven JavaScriptu se jQuery stala jednou z nejpoužívanějších aplikací díky své snadnosti použití, širokému spektru funkcí a počátečnímu zaměření na vizuální jedinečnost.
Zde je 24 chytrých příkladů webových stránek s využitím jQuery a Illustration .
1.Formy padesát pět
Vlastnosti: Změna ilustrace záhlaví; několik malých oken prezentace.
Popis: Nejen, že tato webová stránka má spoustu skutečně dobrého obsahu souvisejícího s designem, ale jQuery se používá mnoha způsoby, jak zvýšit vzhled a použitelnost webu. Přidejte do pravidelně se měnícího ilustrovaného pozadí a některé pěkné kruhové ovládací prvky rozhraní a máte krásné manželství jQuery a ilustrace.
Úvodní stránka s ilustracím záhlaví: 
Levý sloupec se značkami přepnutými na: 
Záhlaví barvy pro přihlášení: 
2. Frozn
Vlastnosti: Vertikální a horizontální posuvné.
Popis: Kromě velkých, pestrobarevných kruhů s čísly jsem si všiml, že nejčastěji jsem viděl profilované obrázky. Takže jsem na ně klikl. To se stalo, když se stalo magie: vertikální a horizontální stínování oken, které otevřely kompletní soubor blogů s vloženými videi Vimeo. Přetrvávající gradient patek je zajímavý efekt při posouvání dolů.
Velké kruhy a autorské ilustrace na domovské stránce: 
Vertikálně se rozšiřující obsah: 
Vyobrazení autorů rozšiřuje a odhaluje položky blogu a videa: 
3. iPhone Mockup
Vlastnosti: Přetažení a přesun, cílení
Popis: Pokud jste někdy přemýšleli o vytvoření aplikace pro iPhone (a který webový vývojář ne?), Pak by to mohlo být webové stránky, které si můžete prohlédnout. Umožňuje přetahovat kreslené prvky nebo elementy rozhraní, které jsou nakresleny na počítači, na kreslený nákres iPhone nebo kreslený počítačem. Ačkoli to je docela holé kosti v designu, to je inovativní použití ilustrace, které mohlo být jen odtáhl dříve s Flash.
Počítačový iPhone editor: 
Skicovaný editor iPhone: 
4. Florida Flourish
Vlastnosti: Mouseovery s průhledností, prezentace
Popis: Brilantní barvy a detaily ilustrovaného stromu na této úvodní stránce jsou okamžitou pozorností. Klepněte na libovolnou kategorii větvící se ze stromu a získáte nejen popisný obsah řízený jQuery, ale také zcela jiný strom. Přejděte dolů a uvidíte pěknou vystředěnou prezentaci a zápatí, které zachytávají přirozený motiv pod zemí.
Plné zobrazení domovské stránky s velkým stromem, prezentací a zápatí: 
Strom použitelnosti: 
Strom "Flexibilita": 
5. Tea Round App
Funkce: Prezentace, menší animace, posuvné objekty
Popis: Možná jsem to já nebo znamení, že Apple má brilantní návrháře, ale mám rád webové stránky, které ořízly fotografie iPhone. Tato webová stránka je animovaná, s promítáním na obrazovce, které bylo spuštěno myšlením přes některé dobře vytvořené knoflíky. Kulatý typ Helvetica se slučuje s designem telefonu a tlačítky. Témata s čajem na stránce a na obrázcích obrazovky v aplikaci svázávají vše dohromady.
Animace uvnitř grafiky iPhone na stránce: 
Pop-up okno zobrazí obrazovku aplikace: 
Další obrazovka aplikace Tea Round zobrazená v grafice iPhone: 
6. Nejlepší předtím
Funkce: Umístění obrazovky, navigační animace
Popis: Pokud by webové stránky mohly užívat jQuery steroidy, tak by to byly Barry Dluhopisy webu. Se všemi dynamickými vizuály by se tato stránka mohla snadno zaměnit za web Flash. Po pečlivé kontrole však zjistíte, že stránka není ani program Flash, ani komplexní z hlediska programování. Ale pochopení, že neexistuje stopa blesku, zůstane ve vaší psyche vyleptaná.
Hlavní nabídka: 
Další věci v kudrnatých příchytkách: 
Podmenu a portfolio: 
Animace
Hledání návrhů webových stránek, pro které byl DHTML vybrán pro vytvoření animace, je vždy překvapením. Nejlepší pro mě je to, že ji vidím na svém iPhone. Jsem si jistý, že to není hlavní důvod, proč se návrháři rozhodli ignorovat Flash a jeho animační nástroje. Nevím, nakolik spoléhali na jQuery, aby kódoval animace, ale museli mít nějaké sadistické tendence nějakého druhu, aby ho vytáhli.
7. Toriovo oko
Vlastnosti: Origami ptáci létající horizontálně.
Popis: Kdo si myslí, že používá origami na webové stránce? A kdo si myslí, že používají modré ptáky origami, které představují tweety, spíše než standardní modré ilustrace? A kdo si myslí, že oživí tweety? Odpovědí na tyto otázky jsou tvůrci Toriho oka. Vytvořte webové stránky s jakýmkoli z těchto funkcí a máte něco zcela originálního. Pro tyto tvůrce neměl dostatek těchto funkcí. Udělali proti-intutivní rozhodnutí udělat všechny animace bez Flash!
Origami Twitter ptáci létající přes krajinu: 
8. Tašky
Funkce: Animace prezentace a zápatí s jednobarevnými ikonami.
Popis: Použití jQuery zde je nejzřetelnější, když je prezentace spuštěna kliknutím v navigační oblasti. Rozsáhlý bílý prostor, černý typ a odpovídající ikonové ilustrace umožňují příjemný web. Ale lo a hle, animace v zápatí nepřestala pracovat od vašeho příjezdu. Pravým tlačítkem myši klikněte na plné černé animace a objevíte tajemství dlouhotrvajícího filmu: Sprites a DHTML.
Hlavní stránka s množstvím bílého místa: 
Velké ikony rozptýlené v obsahu prezentace: 
Animace zápatí běží nepřetržitě, bez ohledu na to, kde jste na webu: 
9. Kidd 81
Funkce: animace záhlaví horizontálně.
Popis: Zářivé barevné zimní kresby zde okamžitě zaujmou pozornost a design má kontinuitu až do zápatí. Stejně jako některé z těchto jiných webových stránek, které používají jQuery k animaci objektů, se zdá, že hladce se pohybující snímky na první pohled neodlišují od aplikace Flash. Těstovina na dortu je však drahá "Wow! Nemůžu uvěřit, že můžete přetáhnout tyto ikony.
Animace hlavičky domovské stránky: 
Zápatí se stejným ilustrovaným motivem: 
Sekce obchodu má stejný znak a barvy: 
Vertikální posouvání
Několik nástrojů JavaScriptu je schopno spouštět plynulé posouvání mezi jednotlivými úseky stránky. jQuery, samozřejmě, je více než schopný tento efekt dosáhnout a alespoň několik webových stránek v této sekci bere tuto cestu. Dynamické posouvání je příjemný efekt, ale v kombinaci s kreativními a detailními ilustracemi je tato funkce pouze jednou částí většího obrazu.
10. Tomáš Pojeta
Vlastnosti: Nebe, oceán, pod vodou.
Popis: Stejně jako několik dalších stránek v této sekci přijme Pojeta motiv, který se pohybuje od vysoké nadmořské výšky až po povrch. Horní část stránky je ve vesmíru s velmi podrobné raketou a opicemi. Přejděte dolů a uvidíte mimozemšťany a balóny ve spodní atmosféře. Dále je vidět část Velikonočního ostrova uprostřed vody, která vede k podmořskému výhledu s ponorkou. Každá ilustrace odpovídá a přechody jsou stejně bezproblémové, jak se dostává.
Rocket a opice ve vesmíru: 
Velikonoční ostrov a toucan: 
Podmořská ponorka: 
11. Morphix
Vlastnosti: Prostor, nebe, půda, podzemí.
Popis: Morphix také začíná nějakou horní atmosférickou akcí, ale pak přechází na půdu namísto moře a končí podzemním výřezem. Styl je zjevně odlišný, ale ilustrace pro každou vrstvu se rozkládá na šířku stránky, stejně jako poslední, což vytváří smysl pro obzor. A opět, přechod od oblohy k podzemí plyne hladce, zejména dynamickým rolováním.
Horní atmosféra, s portfoliem: 
Plocha pozemku, s krávami a mrakodrapy: 
Podzemí, se stromovými kořeny a hřebenem: 
12. GANDRWeb
Vlastnosti: Různé infografiky.
Popis: Na rozdíl od předchozích dvou webových stránek používá tato infografika namísto znaků, krajin a pozadí. Každá část stránky vysvětluje přiloženou grafiku. Spodní část stránky představuje, nepochybně, velký webový formulář. Webové stránky čistě zaměřené na prodej, které využívají tolik dobrých ilustrací, jsou vzácné. JQuery-spouštěné přechody přidat lesk na zprávu.
Infographic vysvětlující výhody a ceny: 
Infographic vysvětlující proces návrhu: 
Webový formulář: 
13. Orman Clark
Vlastnosti: Mraky, země a létající objekty
Popis: Stejně jako první dva webové stránky v této sekci začíná webová stránka Ormana Clarka oblohou, ale vysoká stránka se obklopuje oblačností kolem oblouku, až k zemi, kde jsme narazili na zem. Zřetelný rozdíl mezi touto stránkou a většinou ostatních v tomto článku je pevná pozice hlavní navigace a ilustrace. To je zdůrazňováno starburst v horní části pozadí, které zdůrazňuje plovoucí vejce. Webové stránky také obsahují dobře integrovaný slideshow jQuery pro portfolio.
Balón, kráva a vejce: 
Biplane a jQuery portfolio prezentace: 
Webový formulář, zápatí a pevná navigace: 
14. Dreamerlines
Vlastnosti: Různé koláže.
Popis: Stránka Dreamerlines zaujímá diskrétní přístup. Stejně jako GANDRweb, každá sekce má odlišnou grafiku, která je svázaná s jejími sousedními úseky pouze bílým prostorem. Každá sekce je však jedinečná, detailní, barevná a upoutá pozornost. Silné ilustrace, velký tučný text a barva pozadí nastavují tón.
Začátek velkého textu: 
Koláž v obličeji: 
Webový formulář obklopený mnoha vizuálními prvky: 
15. Sociální svačina
Vlastnosti: Drát, ptáci a zem.
Popis: Motif oblohy se nikdy nestárne a designéři si mohou vybrat z libovolného počtu palet, aby zbarvili svůj obzor. Horizont sociálního občerstvení je trochu mlhavý, výrazně zelený a hnědý. Ptáci sedí na drátech, které jsou rozptýleny vertikálně po celé stránce, a to na oddělené části. Webová stránka končí střechou. Přestože blog nemá hladké rolování jQuery, záslužná ilustrovaná záhlaví s roztomilými znaky si zaslouží zmínku.
Barevná paleta a motiv ptáků nahoře: 
Rámy pro týmové fotografie visí z drůbeže: 
Roztomilé znaky v sekci blogu: 
Prezentace
Jedním z nejčastějších a nejrozšířenějších způsobů využití jQuery je úctyhodný slideshow. Kdykoli po kliknutí myší vidíte obsah po obrazovce klouzat po obrazovce a nelze najít Flash, je to pravděpodobně jQuery. Prezentace na firemních webových stránkách, vstupních stránkách, agenturních portfoliích, webových stránkách elektronického obchodování najdete všude. Jsou to všudypřítomné. Níže uvádíme několik příkladů prezentací, které ožívají kvůli ostrým ilustracím.
16. GoSiteWave
Vlastnosti: Vertikální prezentace s horizontální navigací a atraktivními ikonami.
Popis: Vertikální scrolling slideshow, v kombinaci s ikonami a obrázky, jsou skutečným příběhem zde. Předpokládá se, že prezentace budou posouvány vodorovně, takže naopak je to pěkné. Jasné blues a pomeranče, křehké kulaté knoflíky a tmavé pozadí s dovedně umístěnými pruhy světla zvyšují efekt. Samozřejmě, pokud by ikony nebyly tak dobře provedeny, web by pravděpodobně neuspěl.
Hlavní stránka grafiky: 
Další prezentace: 
17. Sketchen
Funkce: Horizontální prezentace filmů Flash s předem načteným obsahem, velkým textem a ilustracemi.
Popis: Pokud se vám líbí žlutá, budete milovat tuto webovou stránku. Tato prezentace obsahuje velké oříznuté ilustrace, které udržují žluté pozadí neporušené. Další prezentace ve vyskakovacím "lightboxu" obsahuje portfolio. Zmínil jsem se, že obrázky jsou velké? Zaberou spoustu místa, ale jsou velmi dobře. Barva pozadí a obrázky jsou zdůrazněny zelenými a bílými navigačními prvky a ostrý kontrast zaručuje, že použitelnost není znepokojena.
Megafon: 
Bílá pádla: 
Jablko: 
Portfolio v "lightbox": 
18. Formulář Fifty Five
Vlastnosti: Hladké vertikální posouvání, dynamicky generovaný obsah blogu, prezentace, hlavní zvýraznění navigace,
Popis: Nenechávejte monochromatickou paletu barev a jednoduché čárové výkresy. Tato agentura má všechno. Hladké vertikální posouvání, pevná zápatí, která překrývá obsah, prezentaci portfolia, dynamicky vložený obsah blogu apod. Se všemi těmito funkcemi jde o to, co skutečně nastaví místo odděleně, je celkový počet náhodných ilustrací a skutečnost, Všichni jsou opravdu zábavní. Na těchto místech není návštěva stránky úplná bez odběru vzrušujícího videa "O".
Spousta ilustrací na úvodní obrazovce
Typy písma odpovídají stylu ilustrace
Prezentace portfolia
Titulky navigace v zápatí se při rolování zvýrazňují
Horizontální posouvání
Na rozdíl od prezentace, která je obvykle omezena na část webových stránek, se horizontální posouvání (jak je definováno zde) stane na úrovni prohlížeče, nebo alespoň tak cítí. Dynamické horizontální posouvání nemá tolik skvělých příkladů jako vertikální posouvání; ale jak uvidíte, návrháři, kteří si myslí, že mají vodorovně skvělé představy.
19. Sériový řez
Vlastnosti: Velké ilustrace portfolia; horizontální a vertikální posouvání.
Popis: Tato prezentace je skutečně navržena tak, aby převzala pozorovací oblast prohlížeče. Nemůžete posunout vlevo nebo vpravo, ale je to důležité? Ilustrace a design jsou tak vynikající, že vývojář mohl mít křižovatku, vzhůru nohama nebo jakoukoli jinou neintuitivní metodu navigace a lidé by stále vynaložili úsilí na to, aby zjistili, co přijde dál. To, co opravdu pomáhá, je velikost ikony navigace a že fotografie a obrázky portfolia zaujmou celou obrazovku.
Vlaky: 
Obal na CD: 
3-D chlap s obuví: 
20. Tyler Finck
Vlastnosti: Horizontální přechody s animacemi vytvořenými z pozadí.
Popis: Zde je skvělý příklad použití obrázku na pozadí pro vytvoření animačního efektu pro dynamické posouvání horizontálně. Paleta barev je primárně černobílá. Typy písma jsou tučné a na určitých místech mají tlusté blokované pozadí a obrazový typ má skrytý vzhled. Kompletní balíček funguje dobře.
Minimalistická domovská stránka: 
Bio: 
Peníze: 
Další funkce
Některé webové stránky, které používají jQuery, nejsou snadno kategorizovatelné. Mohou mít neobvyklé funkce nebo jemně používat jQuery nebo přizpůsobit běžnou techniku neobvyklým způsobem. Předběžné načítání, automatické dokončování textu, vyblednutí a prokrvení a prokreslení textu přes obrázky jsou některé z triků nalezených v poslední sérii webů této kolekce.
21. Oranžový štítek
Funkce: Předběžné načítání snímků.
Popis: Předběžné načítání snímků je rozsah užívání jQuery společností Orange Label. Když přejdete dolů, položky portfolia se přidávají na stránku (s rotující grafikou, která vám říká, že jsou předem načtena). Z hlediska užitečnosti tato pohodlná funkce udržuje stránku při automatickém načítání obsahu šířky pásma. Obrázek nahoře je velký, pestrý, velmi detailní a lahodný oční bonbóny.
Ilustrace: 
Přiblížená ilustrace: 
Položka portfolia a zápatí: 
22. Silk Finder Icon
Vlastnosti: Dokončení textu.
Popis: Zadejte název ikony a tato webová stránka rozděluje své ikony na základě možných výsledků toho, co jste zadali doposud. Kvalita ikon je docela dobrá a služba je celkem pohodlná. Vzhledem k tomu, že design je skutečně o výsledcích vyhledávání, má málo ve způsobu vizuálního rozptýlení, což je velký plus.
Výchozí zobrazení: 
Výsledky hledání pro "light": 
23. Vyniknite
Vlastnosti: Fades.
Popis: Tato webová stránka začíná skvělou ilustrací pampelišky, dobrým rozložením a příjemným výběrem písma. Jediný znatelný happening jQuery, který se děje, je vyblednutí a vyprchání, ke kterým dochází při navigaci na záložkách. Další malá část nebe je způsob, jakým se pampeliška stane překrývající aktivní i neaktivní tabulky. A když se podíváte pozorně na pozadí, uvidíte některé komplikované vítrové větry doprovázející plovoucí faunu.
Pampelišky rozmazané: 
24. Agentura Halo
Funkce: Automatická prezentace s ilustrací na pozadí; text přes obrázky.
Popis: Pozadí, pozadí, pozadí. Přejděte na tuto webovou stránku a najdete různé dekorativní plné barevných 3-D ilustrací. Impozantní portfólio lze získat prostřednictvím prezentace jQuery na domovské stránce. Případně můžete najít informace o každé položce v sekci portfolia (nebo "práce") z textového překrytí na miniatuře.
Úvodní stránka se slideshow: 
Portfolio překrývá text na obrázcích: 
Další barevné pozadí: 
Napsal výhradně pro WDD Maurice Wrightová. On je webový vývojář a designér a tvůrce Moluv.com . Od roku 2000 je Moluv zdrojem inspirace designu pro tvůrčí mysli, kteří hledají nejlépe vypadající webové stránky na internetu.
Jak změnila jQuery způsob, jakým navrhujete své webové stránky? Prosím o komentář níže ...