24 Slimme ontwerpen van websites die JQuery en illustratie combineren
Dankzij de macht van JavaScript zijn de woorden 'dynamisch' en 'illustratie' niet langer uitsluitend van toepassing op Flash-websites.
Nu dynamische HTML een realiteit is in de meest gebruikte browsers en er veel chique JavaScript-bibliotheken bestaan om het gebruik ervan eenvoudig te maken, kunnen CSS-websites een deel van de straatkrediet die zo strak door Flash is ingehouden, terugnemen.
Van deze nieuwe JavaScript-bibliotheken is jQuery een van de meest gebruikte systemen geworden vanwege het gebruiksgemak, de vele functies en de aanvankelijke focus op visuele uniciteit.
Hier zijn 24 slimme voorbeelden van websiteontwerpen met behulp van jQuery en Illustratie .
1. Formule Vijfenvijftig
Kenmerken: veranderende koptekstillustratie; meerdere kleine slideshow-vensters.
Beschrijving: Niet alleen heeft deze website een heleboel echt goede ontwerpgerelateerde inhoud, maar jQuery wordt op verschillende manieren gebruikt om het uiterlijk en de bruikbaarheid van de website te verbeteren. Voeg een regelmatig veranderende geïllustreerde achtergrond en een aantal mooie ronde interface-besturingselementen toe en je hebt een prachtig huwelijk van jQuery en illustratie.
Startpagina met koptekstillustratie: 
Linkerkolom met tags ingeschakeld: 
Window shade header voor inloggen: 
2. Frozn
Kenmerken: Verticaal en horizontaal verschuiven.
Beschrijving: Behalve de grote, felgekleurde cirkels met nummers, was de functie die ik het meest opviel de geïllustreerde profielfoto's. Dus ik heb erop geklikt. Dat was toen de magie gebeurde: verticale en horizontale zonwering die een volledige set blogberichten opende met ingesloten Vimeo-video's. Het aanhoudende footer-verloop is een interessant effect wanneer u naar beneden scrolt.
Grote cirkels en auteurillustraties op de startpagina: 
Verticaal uit te breiden inhoud: 
Auteursillustraties breiden uit om blogberichten en video te onthullen: 
3. iPhone-model
Kenmerken: slepen en neerzetten, richten
Beschrijving: als je ooit hebt gedacht aan het maken van een app voor de iPhone (en welke webontwikkelaar heeft dat niet gedaan?), Dan is dit misschien een website om uit te checken. Hiermee kunt u geschetste of computergestuurde interface-elementen slepen en neerzetten op een geschetst of door een computer getekend iPhone-overzicht. Hoewel het vrij kale beenderen in ontwerp is, is het een innovatief gebruik van illustratie dat eerder alleen met Flash kon worden uitgetrokken.
Door de computer getekende iPhone-editor: 
Getekende iPhone-editor: 
4. Florida bloeit
Kenmerken: Mouse-overs met transparantie, diavoorstelling
Beschrijving: De schitterende kleuren en details van de geïllustreerde boom op deze splash-pagina zijn onmiddellijke aandachttrekkers. Klik op een van de categorieën die uit de boom vertakken en u krijgt niet alleen beschrijvende door jQuery gestuurde inhoud, maar ook een geheel andere structuur. Scroll naar beneden en je ziet een mooie gecentreerde diavoorstelling en een voettekst die het natuurlijke motief ondergronds neemt.
Volledig overzicht van de startpagina, met grote boom, diavoorstelling en voettekst: 
"Usability" -boom: 
"Flexibiliteit" boom: 
5. Thee Ronde App
Kenmerken: Slideshow, kleine animatie, glijdende objecten
Beschrijving: Misschien ben ik het of een teken dat Apple briljante ontwerpers heeft, maar ik hou van websites met bijgesneden iPhone-foto's. Deze website heeft een geanimeerde diavoorstelling met een diavoorstelling in het scherm die wordt geactiveerd door een paar goed ontworpen knoppen te gebruiken. Het ronde Helvetica-type past goed bij het ontwerp van de telefoon en de knoppen. De theehema-illustraties op de pagina en in de screenshots van de app verbinden alles bij elkaar.
Animaties binnen de iPhone-afbeelding op de pagina: 
Pop-upvenster toont het scherm van de app: 
Nog een app voor Tea Round-apps die wordt weergegeven in de iPhone-afbeelding: 
6. Best Before
Kenmerken: Schermpositionering, navigatie-animatie
Beschrijving: als websites jQuery-steroïden zouden kunnen gebruiken, zouden dit de Barry-obligaties van het internet zijn. Met alle dynamische beelden kan deze website gemakkelijk worden aangezien voor een Flash-website. Na een zorgvuldige inspectie zult u echter merken dat de pagina vanuit programmeerstandpunt noch Flash noch complex is. Maar het besef dat er geen spoor van Flash bestaat, blijft in je psyche geëtst.
Het startmenu: 
Meer dingen in accolades: 
Submenu en portfolio: 
animatie
Het vinden van een websiteontwerp waarvoor DHTML is gekozen om de animatie te maken, is altijd een verrassing. Het beste deel voor mij is dat ik het op mijn iPhone kan zien. Ik weet zeker dat dit niet de hoofdreden is waarom de ontwerpers ervoor kozen om Flash en zijn animatievriendelijke tools te negeren. Ik weet niet hoeveel ze op jQuery vertrouwden om hun animaties te coderen, maar ze moesten een of andere sadistische neigingen hebben gehad om het tot stand te brengen.
7. Tori's Eye
Kenmerken: Origamivogels die horizontaal vliegen.
Beschrijving: Wie denkt er op een webpagina origami te gebruiken? En wie denkt er blauwe origami-vogels te gebruiken om tweets te vertegenwoordigen in plaats van de standaard blauwe illustratie? En wie denkt er aan tweets te animeren? Het antwoord op deze vragen is, de makers van Tori's Eye. Bouw een website met een van deze functies en je hebt iets volledig origineels. Voor deze makers was het hebben van al deze functies niet voldoende. Ze maakten de contra-intuïtieve beslissing om alle animaties zonder Flash te doen!
Origami Twitter-vogels vliegen over een landschap: 
8. Tassen
Functies: Slideshow en voettekstanimatie met pictogrammen in één kleur.
Beschrijving: Het gebruik van jQuery is hier het duidelijkst wanneer de diavoorstelling wordt geactiveerd door een klik in het navigatiegebied. De uitgebreide witte ruimte, het zwarte type en de bijbehorende pictogramillustraties zorgen voor een mooie website. Maar zie, een animatie in het voettekstwerk is niet meer gestopt met werken sinds uw aankomst. Klik met de rechtermuisknop op de effen zwarte animaties en u ontdekt het geheim van de langlopende film van de website: Sprites en DHTML.
Startpagina met veel witruimte: 
Grote pictogrammen verspreid over de inhoud van de diavoorstelling: 
Footer-animatie wordt continu uitgevoerd, ongeacht waar u zich op de website bevindt: 
9. Kidd 81
Kenmerken: Header-animatie horizontaal reizen.
Beschrijving: De felgekleurde winterthema-tekeningen vallen hier meteen op en het ontwerp heeft continuïteit tot aan het voettekstje. Zoals sommige van deze andere websites die jQuery gebruiken om objecten te animeren, lijken de vloeiende bewegende beelden op het eerste gezicht niet van Flash te onderscheiden. De kers op de taart is echter de sleepbare "Wow! Ik kan niet geloven dat je deze "pictogrammen" kunt slepen.
Startpagina-koptekstanimaties: 
Een voettekst met hetzelfde geïllustreerde thema: 
De winkelsectie heeft hetzelfde karakter en dezelfde kleuren: 
Verticale scrolling
Een paar JavaScript-hulpprogramma's zijn in staat om soepel scrollen tussen secties van een pagina te activeren. jQuery is natuurlijk meer dan in staat om dit effect uit te voeren, en op zijn minst een paar van de websites in deze sectie nemen die route. Dynamisch scrollen is een leuk effect, maar in combinatie met creatieve en gedetailleerde illustraties is de functie slechts een deel van het grotere geheel.
10. Tomas Pojeta
Functies: lucht, oceaan, onderwater.
Beschrijving: Net als enkele andere websites in dit gedeelte, neemt Pojeta een motief aan dat van grote hoogte naar onder het oppervlak gaat. De top van de website bevindt zich in de ruimte, met zijn zeer gedetailleerde raket en aap. Scroll naar beneden en je ziet aliens en ballonnen in de lagere atmosfeer. Verderop is een Paaseiland uitziend stuk land in het midden van het water, dat leidt naar een onderwaterzicht met een onderzeeër. Elke illustratie past, en de overgangen zijn ongeveer zo naadloos als het wordt.
Raket en aap in de ruimte: 
Paaseiland en toekan: 
Onderzeeër onderwater: 
11. Morphix
Kenmerken: Ruimte, lucht, land, ondergronds.
Beschrijving: Morphix begint ook met wat hogere atmosferische actie, maar dan overgangen naar het land in plaats van de zee, en eindigt met een ondergrondse cutaway. De stijl is duidelijk anders, maar de illustratie voor elke laag omspant de breedte van de pagina, net als de vorige, om een gevoel van horizon te creëren. En opnieuw stroomt de overgang van hemel naar ondergrond soepel, vooral met dynamisch scrollen.
Hogere atmosfeer, met portfolio: 
Grondniveau, met koeien en wolkenkrabbers: 
Underground, met boomwortels en groundhog: 
12. GANDRWeb
Kenmerken: verschillende infographics.
Beschrijving: in tegenstelling tot de vorige twee websites, gebruikt deze infographics in plaats van tekens, landschappen en achtergronden. In elk gedeelte van de pagina wordt de bijbehorende afbeelding uitgelegd. De onderkant van de pagina bevat, niet verwonderlijk, een groot webformulier. Een puur verkoopgerelateerde website die zoveel goede illustratie gebruikt, is zeldzaam. De jQuery-geactiveerde overgangen voegen glans toe aan het bericht.
Infographic met uitleg over voordelen en prijzen: 
Infographic met uitleg over het ontwerpproces: 
Digitaal formulier: 
13. Orman Clark
Kenmerken: Wolken, grond en vliegende objecten
Beschrijving: net als de eerste twee websites in dit gedeelte, begint de website van Orman Clark met lucht, maar de lange pagina blijft steken in de wolkenlucht helemaal tot aan het voettekstje, waar we de grond raken. Een opvallend verschil tussen deze pagina en de meeste andere in dit artikel is de vaste positie van de hoofdnavigatie en illustratie. Dit wordt geaccentueerd door de vuurwerk aan de bovenkant van de achtergrond die het zwevende ei benadrukt. De website bevat ook een goed geïntegreerde jQuery-diavoorstelling voor de portfolio.
Ballon, koe en ei: 
Biplane en jQuery portfoliodayhow: 
Webformulier, voettekst en vaste navigatie: 
14. Dreamerlines
Kenmerken: Diverse collages.
Beschrijving: de Dreamerlines-site heeft een discrete benadering. Net als bij GANDRweb heeft elke sectie een afzonderlijke afbeelding die alleen door witruimte aan de aangrenzende secties is gekoppeld. Elke sectie is echter uniek, gedetailleerd, kleurrijk en opvallend. Zware illustraties, grote vetgedrukte tekst en achtergrondkleur zetten de toon.
Grote tekst om mee te beginnen: 
In-your-face collage: 
Webformulier omgeven door veel visuals: 
15. Sociale snack
Kenmerken: draad, vogels en grond.
Beschrijving: het luchtmotief wordt nooit oud en ontwerpers kunnen kiezen uit een willekeurig aantal paletten om hun horizon te kleuren. De horizon van Social Snack is een beetje wazig, met een uitgesproken groen en bruin. Vogels zitten op draden die verticaal over de pagina zijn verspreid om afzonderlijke delen te scheiden. De website eindigt met een dak. Hoewel de blog geen soepel scrollen van jQuery heeft, verdient de leuk geïllustreerde kop met schattige personages vermelding.
Het kleurenpalet en vogelmotief bovenaan: 
De frames voor de teamfoto's hangen een vogelkoord af: 
Leuke personages in het bloggedeelte: 
slideshow
Een van de meest voorkomende en herkenbare toepassingen van jQuery is voor de eerbiedwaardige diavoorstelling. Wanneer u inhoud ziet die over het scherm glijdt na een muisklik en er geen Flash kan worden gevonden, is dit waarschijnlijk jQuery. U vindt diavoorstellingen op bedrijfswebsites, bestemmingspagina's, portfolioverslagen, e-commercesites, overal. Ze zijn zo alomtegenwoordig. Hieronder zijn enkele voorbeelden van diavoorstellingen die tot leven komen vanwege scherpe illustraties.
16. GoSiteWave
Kenmerken: Verticale diavoorstelling met horizontale navigatie en aantrekkelijke pictogrammen.
Beschrijving: De verticaal verschuivende diavoorstelling, gecombineerd met de pictogrammen en afbeeldingen, is hier het echte verhaal. Van diavoorstellingen wordt verwacht dat ze horizontaal scrollen, dus hier is het tegenovergestelde in het oog springend. De heldere blues en sinaasappels, gladde afgeronde knoppen en een donkere achtergrond met vakkundig geplaatste lichtstrepen dragen bij aan het effect. Natuurlijk, als de pictogrammen niet zo goed waren gedaan, zou de website misschien niet hebben gesneden.
Grafiek voor beginpagina dia: 
Nog een diavoorstelling: 
17. Schets
Kenmerken: Horizontale diavoorstelling van Flash-films, met vooraf geladen inhoud, grote tekst en illustraties.
Beschrijving: Als u van geel houdt, zult u dol zijn op deze website. Deze diavoorstelling bevat grote bijgesneden illustraties die de gele achtergrond intact houden. Een extra diavoorstelling in de pop-up "lightbox" bevat de portfolio. Had ik al gezegd dat de illustraties groot waren? Ze nemen veel ruimte in beslag, maar ze zijn erg goed gedaan. De achtergrondkleur en afbeeldingen worden geaccentueerd door de groene en witte navigatie-elementen en het scherpe contrast zorgt ervoor dat gebruiksvriendelijkheid geen probleem is.
Megafoon: 
Witte voettekst: 
Appel: 
Portfolio in "lightbox": 
18. Vorm Vijfenvijftig
Kenmerken: soepel verticaal scrollen, dynamisch gegenereerde bloginhoud, diavoorstelling, navigatie-accentuering,
Beschrijving: laat het monochrome kleurenpalet en de eenvoudige lijntekeningen u niet voor de gek houden. Deze bureausite heeft alles. Vloeiend verticaal scrollen, een vaste voettekst die de inhoud overlapt, een diavoorstelling in een portfolio, dynamisch ingesloten bloginhoud, enzovoort. Met al deze functies gaat het erom, wat de site echt onderscheidt is het totale aantal willekeurige illustraties en het feit dat ze ' allemaal best grappig. In die zin is een bezoek aan de site niet compleet zonder de hilarische 'About'-video te samplen.
Veel illustraties in het startscherm
Lettertypen komen overeen met de illustratiestijl
Portfolio diapresentatie
Footer-navigatietitels worden gemarkeerd terwijl u scrolt
Horizontaal scrollen
In tegenstelling tot de diavoorstelling, die meestal beperkt is tot een gedeelte van een website, gebeurt horizontaal scrollen (zoals hier gedefinieerd) op browserniveau, of voelt dat op zijn minst. Dynamisch horizontaal scrollen heeft niet zoveel geweldige voorbeelden als verticaal scrollen; maar zoals je zult zien, hebben ontwerpers die horizontaal denken grote verbeeldingskracht.
19. Seriële snede
Kenmerken: grote illustraties voor portfolio; horizontaal en verticaal scrollen.
Beschrijving: deze diavoorstelling is echt ontworpen om het weergavegebied van de browser te bekijken. Je kunt niet naar links of rechts scrollen, maar maakt het uit? De illustraties en het ontwerp zijn zo opmerkelijk dat de ontwikkelaar kriskras, ondersteboven of een andere niet-intuïtieve manier van navigeren had kunnen doorstaan en dat mensen nog steeds moeite zouden doen om uit te zoeken wat er daarna komt. Wat echt helpt, is de grootte van het navigatiepictogram en dat de portfolio's en foto's het volledige scherm beslaan.
treinen: 
CD hoes: 
3-D gozer met schoenen: 
20. Tyler Finck
Kenmerken: Horizontale overgangen, met animaties gemaakt op de achtergrond.
Beschrijving: Hier is een goed voorbeeld van het gebruik van de achtergrondafbeelding om een animatie-effect te maken voor dynamisch dynamisch schuiven. Het kleurenpalet is voornamelijk zwart en wit. De lettertypen zijn vetgedrukt en hebben op sommige plaatsen dikke, blokachtige achtergronden en het op afbeeldingen gebaseerde type heeft een vaag uiterlijk. Het complete pakket werkt goed.
Een minimalistische startpagina: 
Bio: 
Het geldschot: 
Andere functionaliteit
Sommige websites die jQuery gebruiken, zijn niet gemakkelijk te categoriseren. Ze hebben mogelijk ongebruikelijke functies of maken subtiel gebruik van jQuery of passen een veelgebruikte techniek op een ongebruikelijke manier aan. Pre-laden, automatisch aanvullen van tekst, vervagen in en uit en tekst in lagen over afbeeldingen zijn enkele van de trucjes die je kunt vinden in de laatste reeks websites in deze verzameling.
21. Oranje label
Functies: beeld vooraf laden.
Beschrijving: Voorvertoning van afbeeldingen is de omvang van het gebruik van jQuery door Orange Label. Terwijl u naar beneden bladert, worden portfolio-items aan de pagina toegevoegd (met een roterende afbeelding die aangeeft dat ze vooraf worden geladen). Vanuit het oogpunt van bruikbaarheid zorgt deze handige functie ervoor dat de pagina content die de bandbreedte overspant automatisch niet laadt. De illustratie bovenaan is groot, kleurrijk, zeer gedetailleerd en heerlijk oogverrassend.
De illustratie: 
Afbeelding ingezoomd: 
Portfolio-item en voettekst: 
22. Silk Icon Finder
Kenmerken: voltooiing van de tekst.
Beschrijving: typ de naam van een pictogram en deze website sorteert de pictogrammen op basis van mogelijke resultaten van wat u tot nu toe hebt getypt. De kwaliteit van de pictogrammen is redelijk goed en de service is over het algemeen vrij handig. Omdat het ontwerp echt over zoekresultaten gaat, heeft het weinig visuele afleiding, wat een groot pluspunt is.
Standaard weergave: 
Zoekresultaten voor "light": 
23. Vyniknite
Kenmerken: vervaagt.
Beschrijving: Deze website begint met een geweldige paardenbloemillustratie, goede lay-out en mooie selectie van lettertypen. De enige opvallende jQuery-actie die plaatsvindt, is de vervaging en uitval die optreedt bij het navigeren op de tabbladen. Een ander klein stukje van de hemel is de manier waarop de paardenbloemstengels zowel de actieve als de inactieve tabs overlappen. En als je goed naar de achtergrond kijkt, zie je een aantal ingewikkelde windwervelingen die de drijvende fauna vergezellen.
Paardebloemen in overvloed: 
24. Halo Agency
Kenmerken: automatische slideshow met achtergrondillustratie; tekst over afbeeldingen.
Beschrijving: Achtergronden, achtergronden, achtergronden. Navigeer door deze website en je zult een verscheidenheid aan decoratieve ontwerpen vinden vol kleurrijke 3D-illustraties. Een indrukwekkend portfolio is toegankelijk via een jQuery-diavoorstelling op de startpagina. Als alternatief kunt u informatie over elk item in het portfolio (of "werk") gedeelte van de tekst-overlay op de miniatuur vinden.
Beginpagina met diavoorstelling: 
Het portfolio overlapt tekst op afbeeldingen: 
Een andere kleurrijke achtergrond: 
Exclusief geschreven voor WDD door Maurice Wright. Hij is een webontwikkelaar en ontwerper en maker van Moluv.com . Sinds 2000 is Moluv een bron van ontwerpinspiratie voor creatieve geesten die op zoek zijn naar de best uitziende websites op internet.
Hoe heeft jQuery de manier veranderd waarop u uw websites ontwerpt? Geef hieronder een reactie ...