21 Top-Beispiele für JavaScript

Seite 1 von 2: Seite 1

JavaScript erstellt Plattformen, die einen Benutzer einbeziehen und sicherstellen können, dass er sich an Ihre Website erinnert und diese erneut besucht. Es kann verwendet werden, um Spiele, APIs, Bildlauffähigkeiten und vieles mehr zu erstellen.

Das Internet ist voll von Inspiration für Webdesign , einschließlich großartiger Beispiele für JavaScript, das verwendet wird, um eine Website zum Leben zu erwecken und großartige Benutzererlebnisse zu bieten. Hier finden Sie einige unserer Lieblingsbeispiele für JavaScript in Aktion, die Sie inspirieren können.

01. Histographie

Die Histographie ist eine erstaunliche Möglichkeit, 14 Milliarden Jahre lang Dinge zu erforschen



Die Histographie ist eine erstaunliche Möglichkeit, 14 Milliarden Jahre lang Dinge zu erforschen

Wenn Sie jemals Cosmos gesehen haben, erinnern Sie sich vielleicht an Carl Sagan, der über den Cosmic Calendar sprach. Wenn das Alter des Universums auf ein Jahr verkürzt würde, würde die aufgezeichnete Menschheitsgeschichte in die letzten Sekunden des 31. Dezember passen.

14 Milliarden Jahre Ereignisse sind ein riesiger Datensatz, und die Anzeige in einem Browser ist keine leichte Aufgabe. Aber Designer und Entwickler Matan Stauber stellte sich der Herausforderung - obwohl selbst er nicht sicher war, ob dies möglich sein würde: 'Ich denke, das Haupthindernis müssten Proportionen sein', erklärt er. 'Wie erstellen Sie eine Zeitleiste, wenn 99,9 Prozent des uns bekannten Verlaufs auf weniger als ein Pixel des Bildschirms komprimiert werden müssen?'

Als Sohn eines Historikers schuf Stauber als Student an der Bezalel Akademie für Kunst und Design unter der Leitung von Ronel Mor die Histographie. 'Wenn wir darüber nachdenken, wie Menschen Geschichte visualisieren, sind Zeitleisten wahrscheinlich die häufigste, und dennoch haben sie sich seit den Tagen des gedruckten Papiers nicht viel geändert', sagt er. 'Ich sah dies als eine aufregende Gestaltungsmöglichkeit, insbesondere heute mit dem Zugriff auf Big-Data-Quellen.'

Die Website scannt und indiziert Ereignisse aus Wikipedia, greift auf den Artikel zu und ruft ein Google-Bild und ein YouTube-Video auf. Die Daten sind leicht auffindbar und eine Freude zu konsumieren. Wenn Sie jemals Stunden damit verbracht haben, Wikipedia-Artikel zu erkunden, nehmen Sie sich genügend Zeit für diesen Artikel.

02. Filippo Bello

Adoratorio entschied sich für die Verwendung von CSS3 und Javascript anstelle von WebGL, um ein Gefühl von Tiefe zu vermitteln

Adoratorio entschied sich für die Verwendung von CSS3 und Javascript anstelle von WebGL, um ein Gefühl von Tiefe zu vermitteln

Dieses Online-Portfolio, das das Talent des italienischen 3D-Künstlers Filippo Bello zeigt, wurde intern bei konzipiert, entworfen und entwickelt Adoratorio von Enea Rossi und Alessandro Rigobello. Dem Team wurde völlige Freiheit bei der Gestaltung eingeräumt.

Das Spiel mit der Tiefe auf der gesamten Website ist sehr effektiv - die Bilder bewegen sich langsam auf den Betrachter zu und erzeugen den Eindruck, in jedes Projekt einzutauchen. Dies wird mithilfe eines sogenannten Segmenteffekts erreicht: Das Hintergrundbild wird in verschiedenen Feldern repliziert, die sich in Richtung des Betrachters bewegen. Das Team forderte sich heraus, indem es die offensichtlichsten Technologien vermied. 'WebGL ist nicht für jede Art von Benutzer geeignet', sagt Rossi, Art Director und Mitbegründer. 'Die größte Herausforderung dieser Website bestand darin, zu verstehen, wie der Bildschirm nur mit CSS3- und JavaScript-Code-Strings vertieft werden kann.'

Die Seitenübergänge und die kleinen Zoomeffekte auf den Bildern sind eine nette Ergänzung zum Endergebnis, das - wie Rossi es beschreibt - 'absolut über unseren Erwartungen' lag.

03. Die St. Louis Browns

JavaScript-Beispiele: St. Louis Browns

Die Website von St. Louis Browns ist wie ein Vintage-Buch gestaltet

Für diese Website über die Geschichte des St. Louis Browns Baseballteams, Digitalagentur HLK hat eine sehr schöne Erfahrung gemacht. Die Seite liest sich wie ein gut ausgearbeitetes Vintage-Buch mit Kapiteln und strukturierter Typografie. Benutzer können durch jedes Kapitel scrollen, um eine zeitbasierte, geschichtenähnliche Erfahrung zu erzielen.

Die Inspiration für die Website stammt aus Manuskripten und Anzeigen aus den 1920er Jahren, wobei viele der Bilder direkt aus den Jahren stammen, die sie beschreiben. Dies verleiht einem modernen, digitalen Raum ein einzigartig veraltetes Gefühl. Dies wird durch ein grau-braun getöntes Farbschema ergänzt, das durch einen einzigen Orangeton hervorgehoben wird.

Einige meiner Lieblingsteile dieser Seite sind die kleinen Details, wie die Menüschaltfläche (kreisförmig mit einem Hamburger-Menü im Inneren), die beim Schweben in einen Baseball umgewandelt wird. Ich mag auch die Zeitleiste auf der linken Seite, die dem Bildschirm folgt und beim Scrollen aktualisiert wird.

Die Site wird mit Node.js und dem Express-Framework erstellt, um eine reibungslose Aktualisierung und einen reibungslosen Ablauf zwischen Inhalten zu ermöglichen.

04. Beinarbeitsstudio

JavaScript-Beispiele: Beinarbeit

Die Website von Leg Work Studio verwendet interaktive Animationen, um die Erfahrung zum Leben zu erwecken

Beinarbeit leistet eine Menge großartiger Arbeit im Web, von Grafikdesign über Interaktion bis hin zu Medien. Kein Wunder also, dass die eigene Website keine Ausnahme darstellt. Die Persönlichkeit des Studios kommt durch lustige Illustrationen mit gemischten Medien zum Ausdruck. Es kombiniert Vintage-Fotoeffekte (wie das Punktraster) mit digital gemalten weißen Akzenten und Scans physischer Handschrift, um eine einzigartige Kunst zu schaffen, die die Agentur repräsentiert.

Es sind jedoch nicht nur die Illustrationen, die diese Website bemerkenswert machen - die interaktiven Animationen erwecken sie wirklich zum Leben. Einige der Abbildungen selbst sind Videos anstelle von statischen Grafiken, die mit After Effects erstellt wurden, und Website-Komponenten wie die Seitenleiste werden reibungslos animiert.

Die Website wurde für Mobilgeräte entwickelt, und mobile Interaktionen spiegeln sich in der Desktop-Erfahrung wider, bei der der Benutzer mit dem Trackpad wischen kann, um durch die Abschnitte zu gelangen. Die Website wurde mit Modernizr erstellt, um die Kompatibilität sicherzustellen, und mit jQuery für Interaktionen.

05. Conf Code

JavaScript-Beispiele: Code Conf

lerne zeichnen, wenn du das Zeichnen hasst
Code Confs Website zum Thema Nashville

Die Website für CodeConf geht wirklich über die Standard-Konferenzwebsite hinaus. Die Konferenz fand in Nashville, Tennessee, statt, und alles an diesem Design ist eine Hommage an diesen Ort.

Die Website selbst reagiert sehr gut und hat eine warme, zusammenhängende Farbpalette. Die skurrilen Illustrationen verleihen der Site Charakter und schaffen eine verspielte Country-Rock-Ästhetik, die sich über die gesamte Seite (und sogar bis zum Event selbst) fortsetzt.

Es werden keine Details verschont, da selbst die dekorativen horizontalen Regeln des Menüs (nur bei kleineren Bildschirmgrößen zu sehen) mit der Country-Rock-Ästhetik übereinstimmen. Die Site implementiert Google Maps für Standortfunktionen und basiert auf jQuery und AngularJS.

Alles ist illustriert: alle Veranstaltungsorte, die „Set-Liste“ der Redner, der Aufruf zum Handeln für den Kauf von Tickets und Pausen zwischen den Abschnitten. Es gibt auch eine lustige Besetzung von Charakteren, die auf der Website verteilt sind: Vektorkakteen, Einhörner, Drachen, Oktokaten sowie Cowboys und Mädchen, die Musik spielen und spielerisch auf der Seite posieren.

06. IBM Design

JavaScript-Beispiele: IBM Design

Die Website von IBM Design ist von der physischen Welt inspiriert und nicht von der digitalen

In den letzten Jahren hat IBM in die Erweiterung eines Designprogramms investiert und das Unternehmen zu einem menschenzentrierten Ansatz bei der Erstellung von Software geführt. Vor kurzem wurde die IBM Design Language herausgebracht, die ein Update für das Animationsvokabular enthält. Es bietet Design-Anleitungen und Ressourcen für Webentwickler, die alle Open-Source auf GitHub verfügbar sind.

Was ich an diesem Animationsupdate liebe (noch mehr als die Tatsache, dass es Open Source ist), ist, wie das Studio das Erbe von IBM und die physische Welt als Inspiration betrachtet, anstatt andere digitale Eigenschaften. Hayley Hughes, Leiter der IBM Designsprache, sagt, das Team habe sich von Maschinen inspirieren lassen. insbesondere ihre festen Ebenen, physikalische Masse und starren Oberflächen.

'Vom kraftvollen Schlag eines Druckarms bis zum glatten Gleiten eines Schreibmaschinenwagens war jede Bewegung zweckmäßig und mit Absicht entworfen', erklärt sie. 'Unsere Software erfordert die gleiche Liebe zum Detail, damit sich Produkte lebendig und realistisch anfühlen.'

Warum ist Animation für die IBM Design Language so wichtig? 'So wie die Körpersprache einer Person Ihnen hilft, die Konversation zu lesen, gibt die Animation wichtige Informationen weiter, die den Benutzern helfen, die Navigation und Verwendung unserer Produkte zu verstehen', sagt Hughes.

07. Masi Tupungato

JavaScript-Beispiele: Masi Tupungato

Bildgesteuerte Website für das italienische Weinbauprojekt Masi Tupungato

Diese wundervolle Website der internationalen Agentur für digitale Kreationen Dies Für Masi Tupungato, ein in Italien ansässiges Weinbauprojekt, lässt die Bildsprache fast für sich sprechen.

Ungewöhnlich wird für jede Seite ein Ladebildschirm verwendet, wenn die gestochen scharfen Vollbildbilder geladen werden. Normalerweise wäre dies ein großes Nein-Nein - Benutzer möchten den Inhalt so schnell wie möglich. Hier wird jedoch die Benutzererfahrung tatsächlich verbessert, indem sichergestellt wird, dass die Bilder vollständig geladen sind, bevor Inhalte enthüllt werden. Das Design schafft ein Gefühl von Empathie, sodass die Benutzer das Gefühl haben, im Weingut gewesen zu sein und die Trauben selbst gepflückt zu haben.

Die Site kann auf einigen Seiten (von 1,2 MB bis 5 MB Gewicht) etwas schwerfällig sein, was durch die Einführung einiger Techniken zum verzögerten Laden verbessert werden könnte. Trotz des Gewichts ist die Site gut gebaut. Der Start wird in weniger als einer Sekunde gerendert und die Anzahl der wiederkehrenden Besuche wird innerhalb der zweiten Marke geladen. Das Framework basiert auf unsemantic.com, einem Nachfolger des 960 Grid Systems.

Beim Anzeigen der Website auf dem Desktop und in größeren Ansichtsfenstern können Benutzer jeden Wein einzeln anzeigen und damit interagieren. Sie können die größere Bildschirmgröße nutzen, um alle Weineigenschaften und -details nebeneinander anzuzeigen. Im Gegensatz dazu werden auf der mobilen Website die Details und die Beschreibung eingefügt und können problemlos wieder entfernt werden.

08. tota11y

JavaScript-Beispiele: tota11y

tota11y vereinfacht die Erreichbarkeit

Zugängliche Websites zugänglich zu machen ist von entscheidender Bedeutung. Die Techniken und Tests scheinen jedoch häufig eine tiefgreifende Spezialisierung zu erfordern, die Webentwicklern und Designern das Gefühl geben kann, treibend zu sein.

Geben Sie tota11y ein: Ein einfaches Tool, das als JavaScript-Datei in eine Seite eingefügt oder, noch einfacher, als Lesezeichen auf jeder Site verwendet werden kann. Es kennzeichnet Elemente auf der Seite, die gegen die Richtlinien zur Barrierefreiheit verstoßen - beispielsweise geringer visueller Kontrast oder fehlende Textalternativen für Bilder.

Unberechenbare Elemente werden visuell gekennzeichnet, sodass Sie auf einfache Weise einen Screenshot erstellen und Teammitgliedern oder Kunden genau zeigen können, um welche Probleme es sich handelt. In den erweiterten Erklärungen werden Benutzer in Methoden zur schnellen Behebung von Störungen geschult.

Khan Akademie Die Website von tota11y ist nicht besonders glamourös, aber wichtige Arbeiten sind nicht immer schillernd. Die geschäftliche Einfachheit des Textes - sowohl im Erscheinungsbild als auch im Inhalt - widerlegt die Komplexität des Problems, das das Tool selbst lösen soll.

09. Kenne Lupus

JavaScript-Beispiele: Kennen Sie Lupus

Die Know Lupus-Website untersucht den Zustand auf unterhaltsame und informative Weise

Die Lupus Foundation of America (LFA) ist eine nationale Organisation, die sich für die Lösung des Lupus-Geheimnisses einsetzt. gedeiht Partnerschaft mit der LFA im Rahmen eines Pro-Bono-Projekts zur Sensibilisierung der Öffentlichkeit, um der Öffentlichkeit das Verständnis der Krankheit zu erleichtern.

'LFA wollte ein unterhaltsames und dennoch informatives Spiel entwickeln, das dazu beiträgt, die Öffentlichkeit auf ansprechende Weise aufzuklären und dieses Problem zu lösen', erklärt Laura Sweltz, UX-Designerin und Projektleiterin. 'Unser Designprozess konzentrierte sich darauf, dieses Ziel zu erreichen und gleichzeitig etwas zu schaffen, das Menschen mit Lupus tatsächlich gerne teilen würden.'

Die Lösung von Viget war ein von Casino inspiriertes Kartenspiel, das mit React erstellt wurde und in dem jede Karte eine Tatsache über Lupus hervorhebt. Benutzerdefinierte Illustrationen von Designer Blair Culbreth halten das Spiel unbeschwert, während sie sich mit dem ernsten Thema befassen. Casino-inspirierte Soundeffekte ziehen sich durch das Spiel.

Die Animationen sind flüssig und bissig und verleihen dem Spiel eine weitere Ebene der Freude. Das mobile Erlebnis ist genauso interaktiv wie der Desktop, und reaktionsschnelle Übergänge wurden vollständig berücksichtigt. Das Endergebnis ist eine spielerische Erfahrung, bei der sich das Lernen mühelos anfühlt.

10. Das Boot

JavaScript-Beispiele: Das Boot

The Boat, ein Online-Comic

Langform-Geschichtenerzählen hat auf Nachrichten- und Medienseiten, aber im Rundfunknetz stetig an Popularität gewonnen SBS The Boat, ein Online-Comic, der auf einer Geschichte von Nam Le basiert, fühlt sich sowohl in seinem Stil als auch in seiner Ausführung einzigartig an. Sumi-Tintenillustrationen, fachmännisch ausgeführte Animationen und eine erschreckende Klanglandschaft halten die Geschichte einer Reise eines jungen vietnamesischen Flüchtlings fest.

Um die Geschichte zum Leben zu erwecken, verbrachte der Illustrator Matty Huynh sechs Monate mit Nam Le's Originalprosa, skizzierte Thumbnails und erstellte iterativ die Charaktere.

'Ich denke, das Gleichgewicht, das Sie sehen, stammt aus dieser längeren Entwicklungsphase', erklärt Produzentin Kylie Boltin. 'Diese tiefe Zeit nach innen ermöglichte es den Mitgliedern des Kernteams, die Geschichte genau zu kennen. Wir wussten, dass die Geschichte schlägt und wir wussten, welche Momente hervorgehoben werden mussten. Das Leitprinzip bestand darin, das Kern-Storytelling zu ergänzen, anstatt es zu überwältigen oder ein Element hinzuzufügen, nur um es zu erreichen. '

Die Grafiktafeln wirken wie Tagebuchskizzen - dringend, unvollkommen und zutiefst emotional. Diese Seite zeigt, wie mächtig und ansprechend Online-Storytelling in den richtigen Händen sein kann.

elf. Run4Tiger

JavaScript-Beispiele: Run4Tiger

Kannst du so viel laufen wie ein Tiger? Finden Sie es mit dieser Site und Ihrer laufenden App heraus

Mit Sitz in Moskau Hungrige Jungs hat diese Website für den World Wildlife Fund Russia entworfen, um die Öffentlichkeit für seine Kampagne Save The Tiger zu sensibilisieren. Warum gegen deine Freunde antreten, wenn du gegen einen GPS-verfolgten Amur-Tiger antreten kannst?

Auf dieser Website können Sie die Lauf-App Ihrer Wahl synchronisieren (derzeit werden neun verschiedene Apps unterstützt!) Und Sie und andere Läufer gegen die große Katze antreten, die durchschnittlich 20 km pro Tag zurücklegt. Wenn der Tiger Sie schlägt, spenden Sie 5 US-Dollar an den WWF.

Es ist ein großartiges Konzept und es gibt ein großartiges Design, das dazu passt. Die scharfe Farbpalette in Schwarz und Gelb - für eine Wohltätigkeits-App ungewöhnlich fett - vermittelt die Dringlichkeit der Initiative Save The Tiger.

Die Schöpferin von Run4Tiger, Ksenia Apresyan, sagt, das Team habe beim Entwerfen definitiv Bewegung im Sinn gehabt: „Wir wollten die Website so dynamisch wie möglich gestalten. Aus diesem Grund haben wir uns entschlossen, die neuesten Technologien zu verwenden und unsere Hauptbotschaft aus dynamischen Partikeln auf der Hauptseite zu zeigen. '

Nächste Seite: 10 weitere Top-Beispiele für JavaScript, die Sie inspirieren sollen ...

  • 1
  • zwei

Aktuelle Seite: Seite 1

Nächste Seite Seite 2