24 clevere Website-Designs, die JQuery und Illustration kombinieren
Dank der Stärke von JavaScript gelten die Wörter "dynamisch" und "Illustration" nicht mehr ausschließlich für Flash-basierte Websites.
Nun, da dynamisches HTML in den meisten gebräuchlichen Browsern Realität ist und es eine Menge an ausgefallenen JavaScript-Bibliotheken gibt, die es leicht machen, es zu benutzen, können CSS-Websites etwas von der Street Cred zurücknehmen, das von Flash so fest gehalten wird.
Von diesen neuen JavaScript-Bibliotheken ist jQuery aufgrund seiner Benutzerfreundlichkeit, der Breite seiner Funktionen und der anfänglichen Fokussierung auf die visuelle Einzigartigkeit zu einer der am weitesten verbreiteten Versionen geworden.
Hier sind 24 clevere Beispiele für Website-Designs mit jQuery und Illustration .
1.Form fünfundfünfzig
Features: Ändern der Kopfzeile Illustration; mehrere kleine Diashow-Fenster.
Beschreibung: Diese Website enthält nicht nur viele wirklich gute designbezogene Inhalte, sondern jQuery wird auf vielfältige Weise verwendet, um das Erscheinungsbild und die Benutzerfreundlichkeit der Website zu verbessern. Fügen Sie einen sich periodisch ändernden illustrierten Hintergrund und einige nette kreisförmige Schnittstellenkontrollen hinzu und Sie haben eine schöne Verbindung von jQuery und Illustration.
Homepage mit Header-Illustration: 
Linke Spalte mit aktivierten Tags: 
Window shade header zum Einloggen: 
2. Frozn
Features: Vertikal und horizontal gleiten.
Beschreibung: Abgesehen von den großen, bunten Kreisen mit Zahlen, fiel mir am meisten das aufgezeichnete Profilbild auf. Also habe ich sie angeklickt. Dann passierte die Magie: vertikale und horizontale Fensterschattierungen, die eine ganze Reihe von Blogeinträgen mit eingebetteten Vimeo-Videos öffneten. Der Verlauf der persistenten Fußzeile ist ein interessanter Effekt, wenn Sie nach unten blättern.
Große Kreise und Autorenillustrationen auf der Homepage: 
Vertikal expandierender Inhalt: 
Autorenillustrationen werden erweitert, um Blogeinträge und Videos anzuzeigen: 
3. iPhone Mockup
Features: Drag & Drop, Targeting
Beschreibung: Wenn Sie jemals daran gedacht haben, eine App für das iPhone zu erstellen (und welchen Webentwickler nicht?), Dann könnte dies eine Website sein, die Sie ausprobieren sollten. Sie können skizzierte oder computergesteuerte Oberflächenelemente auf eine skizzierte oder von einem Computer gezeichnete iPhone-Umrisslinie ziehen und ablegen. Obwohl es im Design ziemlich knochig ist, ist es eine innovative Verwendung von Illustrationen, die bisher nur mit Flash erstellt werden konnten.
Computer-gezeichnetes iPhone-Editor: 
Skizzierter iPhone Editor: 
4. Florida blühen
Features: Mouseover mit Transparenz, Diashow
Beschreibung: Die brillanten Farben und Details des abgebildeten Baumes auf dieser Splash-Seite sind sofort aufmerksamkeitsstark. Klicken Sie auf eine der Kategorien, die von der Baumstruktur abzweigen, und Sie erhalten nicht nur beschreibenden jQuery-getriebenen Inhalt, sondern auch einen komplett anderen Baum. Scrollen Sie nach unten und Sie werden eine schöne zentrierte Diashow und eine Fußzeile sehen, die das natürliche Motiv unter die Erde nimmt.
Vollansicht der Homepage mit großem Baum, Diashow und Fußzeile: 
"Usability" -Baum: 
"Flexibilität" Baum: 
5. Tee Runde App
Features: Diashow, kleine Animation, Schiebeobjekte
Beschreibung: Vielleicht bin ich es oder ein Zeichen, dass Apple brillante Designer hat, aber ich mag Websites, die iPhone-Fotos beschnitten haben. Diese Website hat eine animierte Website mit einer Bildschirmpräsentation, die durch Mausbewegungen über einige gut gestaltete Schaltflächen ausgelöst wird. Der abgerundete Helvetica-Typ fügt sich gut in das Design des Telefons und der Tasten ein. Die Tee-Illustrationen auf der Seite und in den Screenshots der App binden alles zusammen.
Animationen innerhalb der iPhone Grafik auf der Seite: 
Popup-Fenster zeigt den Bildschirm der App an: 
Ein weiterer Tea Round App-Bildschirm wird in der iPhone-Grafik angezeigt: 
6. Beste vorher
Features: Bildschirmpositionierung, Navigationsanimation
Beschreibung: Wenn Webseiten jQuery-Steroide aufnehmen könnten, wären dies die Barry Bonds des Webs. Mit all den dynamischen Visuals könnte diese Website leicht mit einer Flash-Website verwechselt werden. Nach sorgfältiger Prüfung werden Sie feststellen, dass die Seite vom Standpunkt der Programmierung aus weder Flash noch komplex ist. Aber die Erkenntnis, dass keine Spur von Flash existiert, wird in deiner Psyche bleiben.
Das Home-Menü: 
Mehr Zeug in geschweiften Klammern: 
Untermenü und Portfolio: 
Animation
Das Finden eines Website-Designs, für das DHTML ausgewählt wurde, um die Animation zu erstellen, ist immer eine Überraschung. Der beste Teil für mich ist, dass ich es auf meinem iPhone sehen kann. Ich bin mir sicher, dass dies nicht der Hauptgrund dafür ist, dass die Designer Flash und seine animationsfreundlichen Tools ignorieren. Ich weiß nicht, wie sehr sie sich auf jQuery verlassen haben, um ihre Animationen zu programmieren, aber sie mussten irgendwie sadistische Neigungen haben, um das zu schaffen.
7. Toris Auge
Eigenschaften: Origami Vögel fliegen horizontal.
Beschreibung: Wer denkt, Origami auf einer Webseite zu verwenden? Und wer denkt, dass blaue Origami-Vögel eher Tweets darstellen als die blaue Standard-Illustration? Und wer denkt, um Tweets zu animieren? Die Antwort auf diese Fragen sind die Schöpfer von Toris Auge. Erstellen Sie eine Website mit einer dieser Funktionen und Sie haben etwas ganz Originelles. Für diese Schöpfer war es nicht genug, all diese Funktionen zu haben. Sie haben die kontraintuitive Entscheidung getroffen, alle Animationen ohne Flash zu machen!
Origami Twitter Vögel fliegen über eine Landschaft: 
8. Taschen
Features: Diashow und Fußzeile Animation mit einfarbigen Icons.
Beschreibung: Die Verwendung von jQuery ist am offensichtlichsten, wenn die Diashow durch einen Klick im Navigationsbereich ausgelöst wird. Der weitläufige weiße Raum, der schwarze Typ und die passenden Symbolillustrationen sorgen für eine gut aussehende Website. Aber siehe da, eine Animation in der Fußzeile hat seit Ihrer Ankunft nicht aufgehört zu arbeiten. Klicken Sie mit der rechten Maustaste auf die schwarzen Animationen und Sie werden das Geheimnis des lang laufenden Films der Website entdecken: Sprites und DHTML.
Homepage mit vielen Leerzeichen: 
Große Symbole, die über den Inhalt der Diashow verteilt sind: 
Die Fußzeilenanimation wird kontinuierlich ausgeführt, unabhängig davon, wo Sie sich auf der Website befinden: 
9. Kidd 81
Features: Header-Animation horizontal gereist.
Beschreibung: Die leuchtenden winterlichen Zeichnungen ziehen sofort Aufmerksamkeit auf sich, und das Design hat Kontinuität bis hin zur Fußzeile. Wie bei einigen dieser anderen Websites, die jQuery verwenden, um Objekte zu animieren, sind die Bilder, die sich leicht bewegen, auf den ersten Blick nicht von Flash zu unterscheiden. Das i-Tüpfelchen ist jedoch das ziehbare "Wow! Ich kann nicht glauben, dass du diese "Icons" ziehen kannst.
Startseite Header Animationen: 
Eine Fußzeile mit dem gleichen illustrierten Thema: 
Der Shop-Bereich hat die gleichen Zeichen und Farben: 
Vertikales Scrollen
Ein paar JavaScript-Tools können ein sanftes Scrollen zwischen den Abschnitten einer Seite auslösen. jQuery ist natürlich mehr als fähig, diesen Effekt auszuführen, und zumindest einige der Websites in diesem Abschnitt nehmen diesen Weg. Dynamisches Scrollen ist ein schöner Effekt, aber kombiniert mit kreativen und detaillierten Illustrationen ist das Feature nur ein Teil des größeren Bildes.
10. Tomas Pojeta
Merkmale: Himmel, Meer, Unterwasser.
Beschreibung: Wie einige andere Websites in diesem Abschnitt verwendet Pojeta ein Motiv, das von der Höhe bis unter die Oberfläche reicht. Die Spitze der Website befindet sich im Weltraum, mit seiner sehr detaillierten Rakete und Affe. Scrolle nach unten und du wirst Aliens und Ballons in der unteren Atmosphäre sehen. Weiter unten ist ein Osterinsel-Stück Land in der Mitte des Wassers, das zu einem Unterwasser-Blick mit einem U-Boot führt. Jede Illustration passt und die Übergänge sind so nahtlos wie es geht.
Rakete und Affe im Weltraum: 
Osterinsel und Tukan: 
Unterwasser unter Wasser: 
11. Morphix
Features: Raum, Himmel, Land, Untergrund.
Beschreibung: Morphix beginnt auch mit einer höheren atmosphärischen Aktion, wechselt dann aber zu Land anstelle von Meer und endet mit einem unterirdischen Cutaway. Der Stil ist offensichtlich anders, aber die Illustration für jede Ebene überspannt die Breite der Seite, wie die letzte, und schafft so einen Horizont. Und wieder fließt der Übergang vom Himmel zum Untergrund fließend, besonders beim dynamischen Scrolling.
Obere Atmosphäre, mit Portfolio: 
Erdgeschoss, mit Kühen und Wolkenkratzern: 
Unterirdisch, mit Baumwurzeln und Murmeltier: 
12. GANDRWeb
Features: Verschiedene Infografiken.
Beschreibung: Im Gegensatz zu den beiden vorherigen Websites verwendet dieser Infografiken anstelle von Zeichen, Landschaften und Hintergründen. Jeder Abschnitt der Seite erläutert die zugehörige Grafik. Der untere Teil der Seite weist, nicht überraschend, eine große Webform auf. Eine rein vertriebsbezogene Website, die so viel gute Illustration verwendet, ist selten. Die von jQuery ausgelösten Übergänge fügen der Nachricht Glanz hinzu.
Infographik erläutert Vorteile und Preise: 
Infographik erklärt den Designprozess: 
Web-Formular: 
13. Orman Clark
Features: Wolken, Boden und fliegende Objekte
Beschreibung: Wie die ersten beiden Websites in diesem Abschnitt beginnt Orman Clarks Website mit dem Himmel, aber die große Seite bleibt mit dem Wolkenhimmel bis zur Fußzeile, wo wir den Boden berühren. Ein deutlicher Unterschied zwischen dieser Seite und den meisten anderen in diesem Artikel ist die feste Position der Hauptnavigation und Illustration. Dies wird durch den Starburst am oberen Rand des Hintergrunds betont, der das schwimmende Ei hervorhebt. Die Website bietet auch eine gut integrierte jQuery-Diashow für das Portfolio.
Ballon, Kuh und Ei: 
Doppeldecker und jQuery Portfolio Diashow: 
Webformular, Fußzeile und feste Navigation: 
14. Träumereien
Features: Verschiedene Collagen.
Beschreibung: Die Dreamerlines-Site verfolgt einen diskreten Ansatz. Wie GANDRweb hat jeder Abschnitt eine eigene Grafik, die nur durch Leerzeichen an die benachbarten Abschnitte gebunden ist. Jeder Abschnitt ist jedoch einzigartig, detailliert, farbenfroh und aufmerksamkeitsstark. Schwere Illustrationen, große Fettschrift und Hintergrundfarbe geben den Ton an.
Großer Text zum Beginn: 
In-dein-Gesicht-Collage: 
Webformular, umgeben von vielen visuellen Elementen: 
15. Social Snack
Features: Draht, Vögel und Boden.
Beschreibung: Das Himmelsmotiv wird nie alt und die Designer können aus einer beliebigen Anzahl von Paletten wählen, um ihren Horizont zu färben. Social Snack's Horizont ist ein bisschen verschwommen, mit einem ausgeprägten Grün und Braun. Vögel sitzen auf Drähten, die vertikal auf der Seite verstreut sind, um Abschnitte zu trennen. Die Website endet mit einem Dach. Obwohl der Blog kein glattes jQuery-Scrollen hat, verdient der lustige illustrierte Header mit niedlichen Charakteren Erwähnung.
Die Farbpalette und das Vogelmotiv oben: 
Die Rahmen für die Teamfotos hängen an einem Vogeldraht: 
Nette Charaktere im Blog-Bereich: 
Diashow
Einer der häufigsten und bekanntesten Anwendungen von jQuery ist für die ehrwürdige Diashow. Wenn Sie sehen, dass Inhalt nach einem Mausklick über den Bildschirm gleitet und kein Flash gefunden werden kann, handelt es sich wahrscheinlich um jQuery. Sie finden Diashows auf Unternehmenswebsites, Zielseiten, Agenturportfolios, E-Commerce-Websites, überall. Sie sind allgegenwärtig. Im Folgenden finden Sie einige Beispiele für Diashows, die durch scharfe Illustrationen zum Leben erweckt werden.
16. GoSiteWave
Features: Vertikale Diashow mit horizontaler Navigation und attraktiven Icons.
Beschreibung: Die vertikal scrollende Slideshow, kombiniert mit den Icons und Bildern, ist die wahre Geschichte hier. Es wird erwartet, dass Diashows horizontal scrollen, also ist das Gegenteil hier ein Blickfang. Die leuchtenden Blau- und Orangetöne, die abgerundeten Knöpfe und der dunkle Hintergrund mit gekonnt platzierten Lichtstreifen verstärken die Wirkung. Natürlich, wenn die Icons nicht so gut gemacht wären, hätte die Webseite den Schnitt nicht gemacht.
Foliengrafiken auf der Startseite: 
Eine weitere Diashow: 
17. Skizzen
Funktionen: Horizontale Diashow von Flash-Filmen mit vorinstalliertem Inhalt, großem Text und Illustrationen.
Beschreibung: Wenn Sie Gelb mögen, werden Sie diese Website lieben. Diese Diashow enthält große beschnittene Illustrationen, die den gelben Hintergrund erhalten. Eine zusätzliche Diashow im Pop-up "Lightbox" enthält das Portfolio. Habe ich erwähnt, dass die Illustrationen groß waren? Sie brauchen viel Platz, aber sie sind sehr gut gemacht. Die Hintergrundfarbe und -bilder werden durch die grünen und weißen Navigationselemente betont, und der scharfe Kontrast stellt sicher, dass die Benutzerfreundlichkeit keine Rolle spielt.
Megaphon: 
Weiße Fußzeile: 
Apfel: 
Portfolio im "Leuchtkasten": 
18. Fünfundfünfzig
Features: Glattes vertikales Scrollen, dynamisch generierter Blog-Inhalt, Diashow, Hauptnavigation,
Beschreibung: Lassen Sie sich von der monochromen Farbpalette und den einfachen Strichzeichnungen nicht täuschen. Diese Agentur-Website hat alles. Glattes vertikales Scrollen, eine feste Fußzeile, die Inhalte überlagert, eine Portfolio-Slideshow, dynamisch eingebettete Blog-Inhalte usw. Bei all diesen Funktionen unterscheidet die Website die Anzahl der zufälligen Illustrationen und die Tatsache, dass sie sind alle ziemlich lustig. In diesem Sinne ist ein Besuch der Website nicht vollständig, ohne das urkomische "About" -Video zu testen.
Viele Illustrationen auf dem Startbildschirm
Schriften entsprechen dem Illustrationsstil
Portfolio Diashow
Fußzeilennavigationstitel werden beim Blättern hervorgehoben
Horizontales Scrollen
Im Gegensatz zur Slideshow, die normalerweise auf einen Bereich einer Website beschränkt ist, passiert horizontales Scrollen (wie hier definiert) auf Browser-Ebene oder fühlt sich zumindest so an. Dynamisches horizontales Scrollen hat nicht so viele großartige Beispiele wie vertikales Scrollen; Aber wie Sie sehen werden, haben Designer, die horizontal denken, großartige Vorstellungen.
19. Serienschnitt
Features: Große Illustrationen für das Portfolio; horizontales und vertikales Scrollen.
Beschreibung: Diese Slideshow wurde entwickelt, um den Anzeigebereich des Browsers aufzunehmen. Sie können nicht nach links oder rechts blättern, aber spielt das eine Rolle? Die Illustrationen und das Design sind so herausragend, dass der Entwickler kreuz und quer, auf dem Kopf oder auf eine andere nicht intuitive Art des Navigierens hätte fahren können und die Leute würden immer noch die Mühe darauf verwenden herauszufinden, was als nächstes kommt. Was wirklich hilft, ist die Größe des Navigationssymbols und dass die Portfolio Fotos und Bilder den gesamten Bildschirm einnehmen.
Züge: 
CD-Cover: 
3-D-Typ mit Schuhen: 
20. Tyler Finck
Features: Horizontale Übergänge, mit Animationen, die im Hintergrund erstellt wurden.
Beschreibung: Dies ist ein großartiges Beispiel für die Verwendung des Hintergrundbilds zum Erstellen eines Animationseffekts für das dynamische horizontale Scrollen. Die Farbpalette ist hauptsächlich schwarz und weiß. Die Schriftarten sind fett formatiert und haben an bestimmten Stellen dicke blockige Hintergründe, und der bildbasierte Typ hat ein skizzenhaftes Aussehen. Das komplette Paket funktioniert gut.
Eine minimalistische Homepage: 
Bio: 
Das Geld geschossen: 
Andere Funktionalität
Einige Websites, die jQuery verwenden, können nicht einfach kategorisiert werden. Sie können ungewöhnliche Eigenschaften haben oder jQuery subtil verwenden oder eine gewöhnliche Technik auf eine ungewöhnliche Weise anpassen. Pre-Loading, automatische Text-Vervollständigung, Ein- und Ausblenden und Übereinanderschichten von Text über Bilder sind nur einige der Tricks, die Sie auf den letzten Webseiten dieser Sammlung finden.
21. Orange Etikett
Eigenschaften: Bildvorladung.
Beschreibung: Image Pre-Loading ist der Umfang der Verwendung von jQuery durch Orange Label. Wenn Sie nach unten blättern, werden Portfolioelemente zur Seite hinzugefügt (mit einer rotierenden Grafik, die Ihnen mitteilt, dass sie geladen werden). Aus Gründen der Benutzerfreundlichkeit sorgt diese praktische Funktion dafür, dass die Seite nicht automatisch Inhalte mit hoher Bandbreite lädt. Die Illustration an der Spitze ist groß, bunt, sehr detailliert und köstliche Augenschmaus.
Die Illustration: 
Abbildung vergrößert: 
Portfolio-Artikel und Fußzeile: 
22. Silk Icon Finder
Features: Textabschluss.
Beschreibung: Geben Sie den Namen eines Symbols ein, und diese Website sortiert ihre Symbole basierend auf möglichen Ergebnissen dessen, was Sie bisher eingegeben haben. Die Qualität der Icons ist ziemlich gut und der Service ist insgesamt sehr praktisch. Da das Design wirklich auf Suchergebnissen basiert, hat es wenig visuelle Ablenkung, was ein großes Plus ist.
Standardansicht: 
Suchergebnisse für "licht": 
23. Vyniknite
Funktionen: Fades.
Beschreibung: Diese Website beginnt mit einer tollen Löwenzahn Illustration, einem guten Layout und einer schönen Auswahl an Schriftarten. Die einzige merkliche jQuery-Aktion, die passiert, ist das Ausblenden und Ausblenden beim Navigieren auf den Registerkarten. Ein weiteres kleines Stück vom Himmel ist die Art, wie die Löwenzahn-Stängel sowohl die aktiven als auch die inaktiven Tabs überlappen. Und wenn Sie den Hintergrund genau betrachten, werden Sie einige komplizierte Windstrudel sehen, die die schwimmende Fauna begleiten.
Löwenzahn in Hülle und Fülle: 
24. Halo-Agentur
Features: Automatische Diashow mit Hintergrund Illustration; Text über Bilder.
Beschreibung: Hintergründe, Hintergründe, Hintergründe. Navigieren Sie durch diese Website und Sie werden eine Vielzahl von dekorativen voller bunter 3D-Illustrationen finden. Ein beeindruckendes Portfolio kann über eine jQuery-Diashow auf der Startseite aufgerufen werden. Alternativ können Sie Informationen zu jedem Element im Portfolio (oder "Arbeit") aus der Textüberlagerung auf der Miniaturansicht finden.
Homepage mit Diashow: 
Das Portfolio überlagert Text auf Bildern: 
Ein weiterer bunter Hintergrund: 
Geschrieben exklusiv für WDD von Maurice Wright. Er ist ein Webentwickler und Designer und Schöpfer von Moluv.com . Seit 2000 ist Moluv Inspirationsquelle für kreative Köpfe, die nach den am besten aussehenden Websites im Internet suchen.
Wie hat jQuery die Gestaltung Ihrer Websites verändert? Bitte kommentiere unten ...