Der begrenzende zweidimensionale Aspekt von Computermonitoren beschränkt heute den Aufbau von Websites. Beim Entwerfen von Parallax-Website-Layouts können diese Effekte und Grafiken vor Ihren Augen in dreidimensionale Schönheit bringen! Oft mit Adobe Flash- oder JavaScript-Bibliotheken erstellt, wird dieser Effekt nicht häufig verwendet, bietet jedoch ein sehr einzigartiges Gefühl.
Nachfolgend einige sehr kreative Beispiele, die ich für digitale Inspiration zusammengestellt habe. Webdesigner aus der ganzen Welt können Ideen für Websites im Parallax-Stil sammeln. Es ist kein sehr verwirrendes Thema, und wenn Sie erst einmal einen Designstil festgelegt haben, ist es einfach, ein paar Grafiken herauszuschneiden und das Ganze zusammen zu codieren.
Rastape
Hier ist das gesamte Hintergrunddesign repräsentativ für eine Restaurantkette. Die Hauptnavigation ist leicht zu finden und die Animationen sind sehr schlank.
Bei der ersten Landung auf der Seite wird die Musik automatisch gestartet. Dies ist möglicherweise nicht die beste Präsentationsfähigkeit, aber es zeigt Zeichen an. Glücklicherweise kann der Audioplayer am oberen Bildschirmrand leicht modifiziert werden. Die Kontaktdaten finden Sie auch unten.
Billys Downtown Diner
Billy's Diner verleiht dem Retro-Thema ein elegantes Klassengefühl. Durch das Anzeigen einer schönen Seite mit Schriftarten und kreativen Farben ist die Website einfach zu navigieren.
Zu den Highlights zählen eine gut platzierte Navigation und brillante Typografie. Ein Großteil des Diner-Gefühls wird auf die Header-Animation angewendet. Dieses Beispiel für das Scrollen durch Parallaxe berührt nostalgische Töne des klassischen Restaurants der 1950er Jahre.
Atlantis Weltausstellung
Dies ist persönlich eine meiner Lieblingswebseiten. Die Designanimationen sind so fließend und der Webentwickler verwendete zumeist alle CSS-Techniken, um sie auszuführen. Sowohl Anfänger als auch Profis müssen dieses Kunstwerk bestaunen.
Wenn Sie die unteren Ebenen der Website besuchen, finden Sie Kontaktinformationen und leere Werbeflächen. Sie werden möglicherweise feststellen, dass der Effekt einer Person durch einen Aufzug in die tiefsten Tiefen des Ozeans in Richtung Atlantis folgt. Die Vektorgrafiken in atemberaubender Qualität für visuelle Designer auf der ganzen Welt.
B5 Designs
Mit B5 Design Studio bewegt sich der Parallax-Scroll horizontal durch die Navigation. Die Startseite enthält einige Links zu externen Quellen ohne seitliche Bildlaufleiste. Es gibt nichts zu verwirrendes an der Benutzeroberfläche, was wirklich gut auffällt.
Sie werden feststellen, dass der gesamte In-Page-Text durch HTML geschrieben und mit CSS gestaltet wurde. Auch mit Bildern wurde kein Flash angewendet. Bei weiterer Prüfung werden die Autoren von jQuery unterstützt. Dies ist auch in ihrem Kontaktformular ersichtlich, das nützliche Tooltips enthält.
Snoggle-Medien
Diese Website wurde ebenfalls mit jQuery erstellt. Möglicherweise stellen Sie fest, dass sie eine Seitennavigation ausführen, die sich gegenüber von B5 bewegt, dh vertikal auf und ab der Seite. Ihre Verwendung von hellen Hintergrundfarben passt gut zu den minimalistischen Tönen.
Die Website betreibt einen Blog, der unter einem ähnlichen Thema betrieben wird. Das Unternehmen betreibt höchstwahrscheinlich WordPress 3.x mit einer jQuery-Division im HTML-Format. Sie haben auch von SEO auf phänomenale Art und Weise profitiert, indem sie alternative und eindeutige URLs für Google zum Crawlen anbieten.
Webdesign Karlsruhe
Obwohl ausschließlich in deutscher Sprache verfasst, hat der Designer der Website das Parallax-Scrollen gebilligt. Die gesamte Website erscheint aus erster Hand in Richtung Holzuntergrund.
Notizen werden als Navigation platziert und der Designer enthält Beispiele seiner bisherigen Arbeit. Der von ihm dargestellte Portfolio-Stil wirkt viel dynamischer als viele. Dies ist möglicherweise eine weitere großartige Verwendung der jQuery-Bibliothek bei der Arbeit. Durch Klicken auf ein Bild werden eine Vorschau und weitere Informationen zum Projekt angezeigt.
FillStudio
Fill Studio ist ein elegantes Beispiel für sehr minimalistisches Denken. Auf der gesamten Website finden Sie Beispiele für weiche Farbtöne. Der Hauptseite fehlt eine Menge, aber die Navigation ist einfach und hält den Besucher auf wenige Aufgaben fokussiert.
Ihre Portfolio-Seite ist sehr beeindruckend und zeigt wunderschöne künstlerische Arbeiten. Jedes ist ein eindeutiges Farbschema, das beim Mauszeiger angezeigt wird. Sie zeigen auch mehr Projektinformationen und Kontaktlinks.
Kalendiar
Wenn ich an einzigartige Kalendiar denke, sticht der Rest hervor. Ihre Website konzentriert sich auf eine ähnliche Sicht der ersten Person auf eine scheinbar unübersichtliche Landschaft. Typografie und grafische Bilder sind weit verbreitet und zeigen ein wenig Verwirrung.
Ich habe großen Respekt vor ihrem einzigartigen Kunststil. Es ist sehr schwierig, Websites zu entwerfen, vor allem etwas so Komplexes. Ich finde, dass ihr Titel viel Macht hat, außerdem ist ihre Muttersprache nicht Englisch und verpasst ein großes Publikum.
Schlagzeile Creative
Eine wunderschöne Agentur für kreatives Design, die für viele Komponenten der Benutzeroberfläche tiefe, satte Farben bietet. Ihre wichtigsten Links und Navigationspfade finden Sie wieder oben auf der Website.
Die Parallaxenkomponente kann eindeutige Koordinaten zur Aufnahme von Informationen darstellen. Diese Art des Designs umfasst eine Dashboard- oder Desktopeinstellung. Die Benutzer werden mit den Links zu Bereichen geführt, in denen sie Unternehmensinformationen, Kontaktdaten und Beispielarbeiten finden können.
Tennessee Trails & Byways
Ich liebe die Tennessee-Reise-Website. Sie verfügen über einige schöne Parallax-Animationen und bieten sogar eine kurze Anleitung, bevor die Site geladen wird. Zugegeben, es ist nicht schwierig, durch ihre Website zu arbeiten, aber es hilft Technologie-Betroffenen.
Es gibt eine riesige Menge an Informationen auf der Website. Viele der aufgeführten Attraktionen enthalten Facebook-Seiten, auf die direkt von der Website aus verlinkt wird. Alle Popups enthalten Echttext und werden unter jQuery entwickelt. Die Seite enthält viele Menüs, die alle leistungsfähige Flyout- und Unterseiten-Animationstechniken verwenden.
Mush Spiel
Ich liebe die digitalen Vektorgrafiken, die Mush zugewiesen werden.Ihr Branding ist bezaubernd und fällt unter den vielen anderen Websites wirklich hervor. Prominent als Parallaxenhintergrund dargestellt, können Sie die Bewegung von Bäumen und hängenden Ästen im Wald sehen.
Sie werden feststellen, dass Mush ein kurzes Demo-Video für ihre App enthalten hat. Es ist in Windows Phone 7 enthalten und verwendet viele coole Grafik-Engines! Wie immer finden Sie kurze Kontaktinformationen und Links zum unteren Fußbereich.
Peitschen Sie Ihre Website
Whip Your Website ist eine hübsche Anwendung mit einigen hellen Funktionen. Sie können eine URL in die Adressleiste eingeben, um deren Layout durcheinander zu bringen. Es ist alles auf HTML5 aufgebaut und enthält einige benutzerdefinierte jQuery-Effekte. Es ist ein toller Ort, um herumzuspielen, wenn Sie 15 Minuten haben!
Diego Ch? Vez
Dhype ist nicht der Inbegriff von Parallax-Designs, obwohl es eine lebendige Oberfläche bietet. Ich persönlich liebe die Hintergrundeffekte. Es ist funky und trägt wirklich zur Persönlichkeit des Unternehmens bei.
Die meisten Site-Links zeigen Popups oder Dia-Seiten an. Dazu gehören Kontaktdaten und Portfolioarbeiten. Da die Seite nur wenige Seiten hat, ist die Navigation ein Kinderspiel! Es ist schwierig, sich zu verlaufen, was gut ist, da alle Informationen, die Sie benötigen, auf den Mittelpunkt und den Mittelpunkt gerichtet sind.
Netlash
Die kreativen Energien von Netlash sind außergewöhnlich. Ich liebe die Navigation im Dashboard-Stil, da so viele Hintergrundbilder zum Leben erweckt werden.
Sie können auf den verschiedenen Seiten vertikal scrollen. Dies ermöglicht die Navigation ohne Links oder jQuery-Schieberegler und zeigt auch, wie alles auf einer einzigen Seite durchsucht werden kann. Sie werden auch feststellen, dass Kontaktdetails und Unternehmensinformationen den Hintergrund ändern. Dies zeigt, dass Sie eine neue Seite besucht haben.
Nicosia Longhi
Das folgende Portfolio enthält so viele faszinierende Verbesserungen an der Benutzeroberfläche. Die Hintergrundmusik ist angenehm und stört das Durchsuchen des Layouts nicht. In der Tat würde ich behaupten, dass es einen schönen Akzent für das gesamte Thema der Website darstellt.
Begleitet wird dies von einer Diskografie mit musikalischen Werken und anderen Informationen über Kontakte. Alle Informationen werden auch in jQuery-Fenstern angezeigt, ohne die Seite neu zu laden. Dies spart auf lange Sicht viel Energie und lässt die Nutzer sich inspirieren.
GaBL?
Es scheint, als würde Gable durch eine jQuery-Engine mit Blackbox-Popups laufen. Diese werden häufig verwendet, um Bildergalerien und kleine Seiteninformationen zu speichern. Das Navigationsmenü befindet sich in der Parallaxgalerie der Bilder - obwohl es etwas verwirrend ist.
Viele der Website-Informationen sind übersichtlich und bieten einige starke Ressourcen. Das Layout gefällt mir sehr gut, und obwohl sich auf jedem Objekt keine Beschriftungen befinden, können Sie mit dem Mauszeiger darauf achten, wohin sie führen. Und es ist nicht so schlimm zu erkunden, da jede Seite ohne Aktualisierung im selben Fenster geöffnet wird.
Head2Heart
Die Galerie der Wolkenvektoren scheint einen Pfad zwischen dem Himmel zu zeichnen. Wenn Sie den Navigationsnummern am unteren Rand folgen, ist es sehr einfach, Informationen und Pfade zu finden, nach denen Sie suchen.
Ich wundere mich wirklich über das einzigartige Farbschema und Layout dieser Website. Es gibt so viele fantastische Animationen, die alle im Vergleich so flüssig erscheinen. Ihr Kontaktformular zeigt einige schwache Vektorarbeiten und lebendige Komponenten der Benutzeroberfläche. Wenn Sie Parallax-Websites mögen, ist dies sicherlich eine Inspiration.
Esteban Mu? Oz
Das Portfolio von Esteban bietet eine Vielzahl von Beispielen. Seine Arbeit ist phänomenal und wird proportional im oberen Bereich seiner Website angezeigt. Hier finden Sie auch Navigationslinks, die alle Inhalte auf derselben Seite enthalten.
Parallax-Scrolling-Effekte werden in seiner Fußzeile mit handgezeichneter Wolkenkunst stark angewendet. Er bietet einige einzigartige externe Links zu externen Quellen, die seine Website in Designgalerien sponsern. Auf diese Weise können Sie Vertrauen bei Ihren Kunden aufbauen und mehr Projektarbeit leisten.
Bauernhauspreis
Ein weiteres horizontal scrollendes Parallax-Layout, das perfekt in unser Set passt! Der Farmhouse Fare behält eine Einstellung der alten Landhausküche im Hintergrund jedes Abschnitts bei. Alle weiteren Informationen sind in einem Popup mit echtem Text enthalten.
Die gesamte Site scheint auf HTML und jQuery ausgeführt zu werden, wodurch die Animationen aktiviert werden. Oben finden Sie standardmäßige Navigationslinks, die Kontaktdetails und Tarifpreise darstellen. Sie schaffen köstlichen Pudding und andere Desserts und haben das Geschäft seit Jahren weitergegeben.
BeerCamp auf der SXSW 2011
Beer Camp verwendet eine sehr lebendige Typografie, um ihre Arbeit zu demonstrieren. Viele der Überschriften und Untertitel sind selbst für Sehende schwer lesbar. Wenn Sie mit Ihrem Mausrad nach außen rollen, können Sie den Text vergrößern, der anfangs klein erscheint.
Beim Navigieren zwischen den Überschriften-Links werden zusätzlich Zoom-Animationseffekte angezeigt. Dies kann auf jeder ihrer Seiten gesehen werden und zeigt einen fantastischen Effekt. Die Site scheint in HTML geschrieben zu sein, das möglicherweise jQuery-Fontbibliotheken verwendet.
Ben der Leibwächter
Ich bin ein großer Fan von Bens Arbeit. Er hat innerhalb seiner Website eine digitale Welt geschaffen, in der Sie durch dunkle Gassen in seiner Stadt navigieren können. Sie finden keine physischen Navigationslinks, da die einzigen Informationen ganz oben und unten auf der Seite angezeigt werden.
Ben setzt auch seine gesamte Galerie auf eine Seite. Dies bedeutet keine Erfrischung, wie es bei allen bisher bekannten Parallax-Galerien üblich ist. Die wahre Inspiration liegt hier in der Hintergrundgrafik und im komplexen jQuery-Animationsstil. Ich bin ein Fan von Ben's Layout und würde gerne andere Designer sehen, die ähnliche Atmosphären auf ihren Websites schaffen.
TEDxPortland
TED ist eine wunderbare Veranstaltung mit einigen der kompetentesten Referenten. Ihre Website bietet einige großartige Videos, und für ihre Veranstaltung in Portland könnte ich mit ihrer Designauswahl nicht zufriedener sein.Die gesamte Website basiert auf dem Parallax-Scrollen, wobei die Überschrift beibehalten wird.
Sie können problemlos und ohne Aktualisierung durch jede Seite navigieren. Der schwarze Hintergrund bietet eine perfekte Leinwand, auf der scharfe weiße Buchstaben von der Seite springen können. Sie können wählen, mit der seitlichen Bildlaufleiste zu blättern, anstatt Navigationslinks zu verwenden. Diese Methode ist jedoch viel langsamer und die manuelle Navigation erfordert etwas Know-how.
Resolutionismus
Diese Webdesign-Firma hat in ihrem Layout viele Dinge richtig gemacht. Sie wenden viele jQuery-Effekte auf ihren Seiten an, um die Dinge ein wenig aufzufrischen. Sie finden die Links zu ihrem Portfolio schnell und mit einem Schuss Animationseffekt.
Jede Fallstudie bietet einen direkten Link zum Projekt sowie ein ergänzendes Video für potenzielle Kunden. Kontaktinformationen sowie Google Maps-Anweisungen finden Sie am unteren Rand der Seite. Sie können die einzelnen Beiträge in der rechten oberen Ecke jedes Fensters sortieren.
David Beckham
Davids Website ist sehr minimalistisch, was zeigt, wie einfach die Übertragung von Informationen sein kann. Auf jedes Schiebefenster kann über das Navigationssystem rechts zugegriffen werden. Eine Reihe weißer Punkte ist verfügbar und kann als Navigationsbereich angeklickt werden.
Die Tafeln enthalten einen anderen Hintergrund von David und darüber hinaus weiße Beschriftung auf schwarzem Hintergrund. Ganz unten finden Sie einige Ressourcen für Kontakt und Gutschriften. Außerdem ein schicker Pixelzähler, der anzeigt, wie viele einzelne Pixel Sie gescrollt haben
Ap-o
Apo betreibt eine fantastische Website mit wunderschönen Parallax-Slideranimationen. In der unteren rechten Ecke finden Sie einen Pfeil, der Sie von jedem Seitenbereich zum nächsten führt. Seine Website läuft in einer vertikalen Atmosphäre, was das Scrollen nach unten ohne jQuery-Effekte erleichtert.
Ein Nachteil, den ich gefunden habe, ist, dass es anfangs kein großes Navigationssystem gibt. Es kann schwierig sein, durch jede Seite zu gehen und die benötigten Informationen eindeutig herauszuholen. Seine Hintergründe sind auch etwas hart für die Augen, die erweicht oder etwas mehr geheilt werden könnten.
Vampiropfer
Dies ist eine erschreckende Website. Der Designer umfasste viele realistische Kunstwerke aus Vampiren, Monstern und dunklen Gassen, um selbst die dunkelsten Geister zu vertreiben. Das Parallax-Scrollen funktioniert jedoch hervorragend! Es ist eine fantastische Ergänzung zum gruseligen Thema.
Die Informationen sind vertikal angeordnet, was bei jedem klassischen Website-Layout zu erwarten ist. Die Links und der Seitentext sind etwas schwer zu lesen, da die Hintergrundbilder im Hintergrund wirklich zu Ihnen springen. Aber ich muss den Designern in einer erstaunlichen kreativen Anstrengung applaudieren, wie ich sie noch nie zuvor erlebt habe.
Manufaktur d'Essai
Ein Aspekt, den ich an ihrem Design sehr schätze, ist die Einbeziehung von Sprachübersetzungen. Sie können von der rechten Ecke aus zwischen Italienisch oder Englisch wechseln. Das Website-Menü ist ebenfalls standardmäßig ausgeblendet. Dies ist etwas verwirrend.
Ihre Seitenanimationen sind brillant und bieten wirklich erstaunliche Parallax-Effekte. Die Hintergrundbilder wiederholen sich häufig und werden durch ihre Katalog- und Kontaktseiten übertragen. Dort finden Sie auch einen brillanten Portfolio-Bereich, der auch Werke in einem jQuery-Galerieformat enthält.
Elect-LO-Nica
Diese japanische Website funktioniert auch mit Parallax-Verzerrungseffekten und vertikalem Bildlauf. Sie können einige nette Animationseffekte finden, wenn Sie einen Bildlauf nach unten durchführen, um einige schöne Vektorgrafiken zu zeigen.
Der gesamte Text ist auf Japanisch geschrieben. Sie müssen jedoch nicht den Inhalt der Website verstehen, um deren Designstil zu verfolgen. Ganz unten finden Sie eine Trackliste und einige weitere Kontaktdaten. Ich mag ihre Layout-Anpassung, da sie eine sehr einfache Denkweise darstellt.
Rohto Japan
Rohto Japan ist ein viel prominenter vertriebenes Unternehmen. Ihr Layout ist wieder mit horizontalem Bildlauf und verlagernden Links versehen. Auf der unteren Ebene finden Sie Links zu sozialen Netzwerken und externe Kontakte.
Darüber befinden sich die wichtigsten Navigationslinks. Sie sind nicht besonders hervorzuheben und werden im oberen Teil der Seite, die meistens leer ist, sogar besser dargestellt. Die Seitendetails sind sehr knackig. Ich bin auch ein großer Fan ihres Animationsstils, der für den Übergang schnell und fließend ist.
