JQuery Parallax-Beispiele. Einfache Parallaxe-Effekttechnik

, Schildkröten in der Zeit. oder originelles Spiel. Mondpatrouille . In diesen Spielen wird im Moment mehrere Parallaxtechnik beobachtet, wenn mehrere hintergrundschichten Mit unterschiedlichen Texturen, der sich mit unterschiedlichen Geschwindigkeiten bewegt, was den Effekt von dreidimensionalen Raum erzeugt.

Warum habe ich angefangen, über Retro-Spiele im Web-Development-Artikel zu reden? Die einfachste Antwort könnte sein "Weil sie cool sind, aber nein. PararAllax Scrolling ist ein Konzept des Klassenzimmers, das seinen Weg in die Welt des Webdesigns macht. Nike war unter dem ersten, der diese Technik mit großem Erfolg benutzte, als sie Weiden und Kennedy-Marketing-Giganten einstellten, um ihre ursprüngliche Nike-bessere Welt zu entwickeln. Die Site Nike Bessere Welt wurde von dieser Zeit aktualisiert und durch einen neuen ersetzt, es gibt jedoch einen weiteren Standort, der dem ersten Parallaxententwurf von Nike-Site über Sportgetränke ähnlich ist.



Wahrscheinlich haben Sie bemerkt, dass während des Scrollens der Site-Seite die wenigen verschiedenen Elemente auf dieser Seite auf dieser Seite mit unterschiedlichen Geschwindigkeiten bewegt werden. Nehmen wir die Seite auf dem Bild von oben auf dem Bild. Wenn die Seite nach unten gescrollt ist, sehen Sie, dass blauen Punkte im Hintergrund (diejenigen, die etwas verschwommen sind), sich mit der gleichen Geschwindigkeit wie Scrollbar bewegen. Sie werden auch sehen, dass eine Gruppe blauer Punkte, die stärker fokussiert und im Vordergrund liegen, mit etwas bewegen größere Geschwindigkeitals Bildlaufleiste. Schnellerer diese Punkte bewegt sich Text "0 Zucker | 0 Kalorien | Natürlich gesüßt "und der Haupttitel der Seite" Produkte ". Und schließlich gibt es Bilder des Produkts selbst, sowohl klein als auch defokussiert im Hintergrund und groß, fokussiert und liegen im Vordergrund. Hintergrundbilder von Produkten bewegen sich mit der gleichen Geschwindigkeit wie der Text, während sich Produktbilder im Vordergrund schneller bewegen als dieser Text. Es ist alles und ist eine ideale Demonstration des Parallax-Scrollens, wenn verschiedene Bilderlagen einander überlagert sind, und jeder bewegt sich beim Scrollen der Seite mit unterschiedlichen Geschwindigkeiten, wodurch ein dreidimensionaler Effekt erzeugt wird.

Parallax-Scrollen ist nicht auf die vertikale Schriftrolle der Seite oder dem Scrollen in einer geraden Linie beschränkt. Wir geben Nintendo's Recht, ein ideales Beispiel zu demonstrieren, das diese Erklärung bestätigt. Erinnern Sie sich an die frühen Spiele von Nintendo, wo sich unsere Helden in der Regel horizontal von links nach rechts entlang des Bildschirms bewegen, und nicht senkrecht nach unten, wie wir es auf dem aktivierten Standort oben gesehen haben. Fahren Sie mit dem Markiokart Wii und lassen Sie uns über einige coole Dinge sprechen, die wir dort sehen können.

Das erste, was Sie bemerken, ist die Richtung des Seitenden Scrollens - es ist nicht senkrecht, aber wie oben gesagt, aber ursprünglich horizontal. Natürlich ist es cool, aber es ist auch kein neues Konzept. Sie werden auch den Parallaxeffekt mit Dinosaurier Yoshi und Muscheln auf dem Hintergrund, Mario und Luigi im Vordergrund und im Vordergrund und den Hauptinhalt, der beim Scrollen mit unterschiedlichen Geschwindigkeiten verschoben werden. Sobald Sie jedoch zu den Seiten #Highlights und #attack gelangen, wird die Flugbahn der Verschiebung perfekt horizontal sein. Gleiches gilt für den Übergang zwischen #Rediscover und #snes-Seiten. Bilder behalten nicht nur ihre unterschiedliche Geschwindigkeit Verschiebungen, aber auch die allgemeine Richtung von horizontal bis vertikal ändern.

Es ist auch erwähnenswert, dass die Verwendung des Parallaxeffekts auf Ihre Website nicht nur durch die Möglichkeit begrenzt werden sollte, einen künstlichen 3D-Effekt zu erstellen. Die Website des deutschen Webdesign-Studios WebSeitenfaktory ist ein Beispiel dafür, wie Sie PararAllax verwenden können, um der Site-Seite unterschiedliche Effekte hinzuzufügen, z. B. die Bewegung von Symbolen in verschiedenen Trajektorien, deren Erhöhung und Abnahme des Site-Scrollens.

Parallax-Scrollen kann auch dazu beitragen, den Standort wiederzubeleben, auf dem nicht viel Inhalt besteht. Was ist, wenn Ihre gesamte Site aus einem Leitbild oder einem Sektion der über uns, plus Kontaktinformationen besteht? Höchstwahrscheinlich könnten Sie eine Seite und unter bestimmten Bedingungen erstellen, und unter bestimmten Bedingungen hätten Sie eine gute one-Seite-Site, aber er wird von Besuchern erinnert? Höchstwahrscheinlich nicht. Aber was ist, wenn Sie ihm ein wenig Parallaxe hinzufügen, wie haben die Menschen im Frühling / Sommer getan?

Mein erster Eindruck war "oh, diese Seite sieht hübsch aus." Als ich jedoch anfing, es zu schubsen, war der Eindruck sofort "Wow, diese Seite ist cool!". Das Hinzufügen eines einfachen Parallaxe-Effekts macht den Unterschied nur zwischen nicht schlecht und denkwürdig.

PararAllax Scrolling ist ein guter Trick, der in der Hülse aufbewahrt werden kann. Und es kann immer angewendet werden, unabhängig davon, ob Sie eine komplexe multistanische Site oder eine einfache Einzelseite-Visitenkartenstelle erstellen.

Beispiele für Standorte mit Parallaxe

Einige von ihnen sind sehr cool, ich empfehle mir, einzubewahren:

Hallo zusammen. Heute werde ich Ihnen von einem kleinen Skript erzählen, um einen einfachen Parallaxen-Effekt zu erstellen.

Der Artikel ist kurz, aber informativ, so dass Sie nach 15 Minuten PararAllAld zu Ihrem Lunding hinzufügen können. Wenn Sie längst diesen interessanten Effekt auf der Website hinzufügen wollten, lesen Sie dann auf ...

Was ist Parallaxe-Effekt auf der Website?

Sagen wir Ihnen zuerst von dem, was es überhaupt ist. So ist der Paraludex-Effekt in Webdesign ein solcher Empfang, bei dem das Hintergrundbild langsamer ist als die darin enthaltenen Elemente. Für erfahrener Erlebnis machen Sie eine Reservierung, die wir den Effekt von Parallaxe nicht an den Cursor der Maus binden werden. Und erstellen Sie einfach Parallaxe-Hintergrund. Lass uns fortfahren.

So erstellen Sie einen Parallaxe-Effekt auf der Website

Das erste, was wir mit der JQuery-Bibliothek verbinden. Wie üblich zwischen Kopf-Tags:

Jetzt müssen Sie das Script einfache Parallaxe-Scrollen herunterladen. Ich empfehle, um sofort eine komprimierte Version zu verwenden, da zusätzliche Einstellungen Innerhalb des Skripts brauchen Sie nicht:

Lassen Sie uns das herausfinden, dass Sie sich auf der HTML-Seite registrieren müssen, um unseren PararAllax-Effekt zu erhalten.

Smartlanding.

Landing-Seite erstellen.

Data-Parallaxe \u003d "Scroll"

Daten-Image-SRC \u003d "Pfad zum Bild / BG.PNG"

Bitte beachten Sie, dass das Bild nicht mit dem IMG-Tag in den Kopf eingesetzt wird, und wird direkt in das Attribut in dem Container eingestellt, in dem wir Parallaxe implementieren möchten.

In diesem Fall können Sie grundsätzlich fertig sein, aber ein paar Worte:

  • Wenn es keine anderen Elemente im Tauchgang gibt, in denen der Parallaxe implementiert werden sollte, ist es notwendig, ihm eine Höhe zu fragen, ansonsten sehen Sie nichts.
  • Im Falle der Verwendung nicht adaptives Design.Sie können die Breite und Höhe des Bildes direkt an HTML einstellen, indem Sie die Attribute der Naturalwidth- und Naturheiht-Attribute verwenden.
  • Sie können Bilder mit dem Attribut des Datenposition verschieben. Dies ist eine analoge Hintergrundposition in CSS.

Mit den übrigen Optionen finden Sie auf der offiziellen Projektseite, die oben angegeben ist.

Die Wirkung von Parallaxe ist eine sehr interessante Technik. Beim Scrollen bewegt sich das Hintergrundbild langsamer als der Inhalt, und das Ergebnis ist die Illusion des 3D-Raums. In dieser Lektion zeigen wir einfach und effektive Methode Erhalten Sie einen wundervollen Effekt.

Markierung

Diese Technik basiert auf der Steuerung der Geschwindigkeit des bewegten Hintergrundbildes. Erstellen Sie HTML-Kennzeichnung mit zwei Abschnitten mit "Data-Type" und "Data-Speed" -attributen. Zuweisen von Attributen werden ein wenig später angezeigt:

Stichworte

Mit den Attributen von Datentypen und Datengeschwindigkeit können Sie einfach und verständlich markieren.

In Übereinstimmung mit der Spezifikation werden alle Attribute, die mit Daten anfangen, als Speicherung privater Daten verarbeitet. Zusätzlich beeinflussen sie die Vorlage nicht.

Da wir die Geschwindigkeit von Scrolling-Hintergrundbildern steuern müssen, verwenden wir für wichtige Parameter Datentyp \u003d "Hintergrund" und Datengeschwindigkeit \u003d "10".

Dann fügen Sie Tag hinzu

in jedem Tag.
.

Absolute Positionierung.
Einfache Parallaxeeffekt.

Wir scrollen den Tag-Hintergrund herunter

langsamer als sein Inhalt, das ist
. Dies schafft die Illusion von Parallaxen.

CSS.

Bevor Sie zu jQuery Magic wechseln, fügen Sie für jeden Artikel Hintergrundbilder hinzu

In CSS-Code.

#Home (Hintergrund: URL (home.jpg) 50% 0 Wiederholung fixiert; min-höhe: 1000px;) # lustig (Hintergrund: URL (etwa.jpg) 50% 0 No-Resup-Min-Height: 1000px;)

Und wir definieren die Stile für den Rest der Elemente unserer Demonstrationsseite.

#Home (Hintergrund: URL (Home-BG.JPG) 50% 0 Wiederholung behoben; Min-Höhe: 1000px; Höhe: 1000px; Rand: 0 Auto; Breite: 100%; max-Breite: 1920px; Position: relativ;) #Home Artikel (Höhe: 458px; Position: absolut; Text-Align: Center; oben: 150px; Breite: 100%;) #Bout (Hintergrund: URL (etwa-bg.jpg) 50% 0 Wiederholung fixiert; min-höhe : 1000px; Höhe: 1000px; Rand: 0 Auto; Breite: 100%; max-Breite: 1920px; Position: relativ; -webkit-Box-Schatten: 0 50px RGBA (0,0,0,0,0,0,8) ; Box Shadow: 0 0 50px RGBA (0,0,0,0,0,8);) #Bout-Artikel (Höhe: 458px; Position: Absolut; Text-Align: Center; oben: 150px; Breite: 100%; )

Magischer Code

Verwenden Sie jQuery. Beginnen wir mit dem Standarddokument.Ready () -Methode, um in Bezug auf die Seitenlast und ihre Manipulation bereit zu sein.

$ (Dokument) .Ready (Funktion () ());

Jetzt brauchst du Aufmerksamkeit. Das erste, was hier ist, ist das Geschehen - Iteration in allen Elementen

Mit dem Attribut-Datentyp \u003d "Hintergrund" auf der Seite.

$ (Dokument) .Ready (Funktion () (Abschnitt "Abschnitt"). Jede (Funktion () (Var $ bgobj \u003d $ (diese); // ein Objekt ernennen));););

In function.ach () Fügen Sie eine weitere Funktion hinzu .Scroll (), das zum Zeitpunkt des Starts des Scrollens aufgerufen wird.

$ (Fenster) .Scroll (Funktion () () (

Sie müssen feststellen, wie viel der Benutzer die Seite scrollt, und teilen Sie den resultierenden Wert dann mit dem in dem Data-Speed-Attribut definierten Wert auf.

VAR YPOS \u003d - ($ window.scolltop () / $ BGOBJ.DATA ("Geschwindigkeit"));

$ window.ScollTop () - Wir erhalten den aktuellen Scrollwert von oben. $ BGOBJ.DATA ("Speed") bezieht sich auf das Attribut des Datengeschwindigkeit in der MarkUp. YPOS - Der endgültige Wert, der zum Scrollen verwendet wird. Ein negativer Wert wird jedoch verwendet, da der Hintergrund in der entgegengesetzten Richtung relativ zum Scrollen des Benutzers verschoben wird.

In unserem Beispiel ist das Data-Speed-Attribut 10. Angenommen, das Browserfenster wird von 57pX gescrollt. Dies bedeutet, dass 57px in 10 \u003d 5,7px unterteilt ist.

// Sammeln Sie die Position der VAR-Koordinome \u003d "50%" + YPOS + "PX"; // verschieben Sie $ BGOBJ.CSS-Hintergrund ((BackgroundPosition: Koordinome));

Jetzt müssen Sie alle Daten in einem Wert sammeln. Um die horizontale statische Positionsstellung zu speichern, verwenden wir für seine Xposition-Eigenschaft einen Wert von 50%. Fügen Sie dann YPOS als Wert der Yositionseigenschaft hinzu und weisen Sie dann die Koordinaten des Hintergrunds zu

: $ bgobj.css ((BackgroundPosition: Coords)); .

In der letzten Form sieht der Code so aus:

$ (Dokument) .Ready (Funktion () ("Abschnitt". JEDE (Funktion () (Var $ BGOBJ \u003d $ (diese); // Ascret $ (Fenster) .scroll (Funktion () (Var YPOS \u003d - ($) fenster.scrolltop () / $ BGOBJ.DATA ("Geschwindigkeit")); // Sammeln Sie den Wert der Hintergrundkoordinaten zusammen Var-Koordnormen \u003d "50%" + YPOS + "PX"; // verschieben $ bgobj.css (( BackgroundPosition: Koordinne);););)););););

Fixierer für IE.

Ein Punkt bleibt bestehen: Alte IE-Versionen können Tags nicht abheben

und
. Es ist leicht, Dinge zu korrigieren, wir werden die Standardlösung zum Erstellen von Elementen verwenden, die einen Browser erstellen, um HTML5-Tags zu erkennen.

// Elemente erstellen für dh document.CreateeSeelement ("Artikel"); document.createelement ("Abschnitt");

Zusätzlich verwenden wir die CSS-Reset-Datei, sodass alle Browser gleichermaßen angezeigt werden.

Parallaxe(Parallaxe, Griechisch. Änderung, Wechsel) - Dies ist eine Änderung der sichtbaren Position des Objekts relativ zum entfernten Hintergrund, abhängig von der Position des Betrachters. Von der Priorität wurde dieser Begriff für Naturphänomene in Astronomie und Geodäsie verwendet. Beispielsweise ist eine solche Verschiebung der Sonne in Bezug auf den Pfosten, wenn sie in Wasser reflektiert wird, und es gibt PararAllax in der Natur.

Im Webdesign Pararallaks-Effekt oder PararAllax-Scrollen - Dies ist eine spezielle Technik, wenn das Hintergrundbild in der Zukunft langsamer wird als die Elemente des Vordergrunds. Diese Technologie wird immer noch häufiger angewendet, da es wirklich spektakulär und kühl aussieht.

Dieser Effekt eines dreidimensionalen Raums wird mit mehreren Schichten erreicht, die einander überlagert sind und sich beim Scrollen bewegen verschiedene Geschwindigkeit. Mit dieser Technologie können Sie nicht nur einen künstlichen dreidimensionalen Effekt erstellen, Sie können es auf Symbole, Bilder und andere Elemente der Seite anwenden.

Nachteile des PararAllax-Effekts

Der wichtigste minus parallaxe- Dies sind Probleme mit der Leistung der Site. Es sieht alles schön und stilvoll aus, aber die Verwendung von JavaScript / Jquery, mit deren Hilfe der Effekt von Parallaxe erstellt wird, nimmt die Seite erheblich und verringert die Geschwindigkeit des Ladens erheblich. Dies liegt daran, dass es auf komplexen Berechnungen basiert: JavaScript muss die Position jedes Pixels auf dem Bildschirm steuern. In einigen Fällen ist die Situation auch durch die Probleme mit Crossbuster und Cross-Platform kompliziert. Viele Entwickler empfehlen den Parallaxeffekt in Bezug auf die maximal zwei Elemente der Seite.

Alternative Lösung

Mit dem Aufkommen von CSS 3 ist die Aufgabe ein bisschen vereinfacht. Damit können Sie einen sehr ähnlichen Effekt erstellen, der in Bezug auf ressourcensicherer viel wirtschaftlicher ist. Die Essenz ist, dass der Inhalt der Site auf einer Seite veröffentlicht wird, und die Bewegung auf Unterpasten erfolgt durch das CSS-3-Übergang-Verfahren. Dies ist derselbe Pararallax, aber mit einiger Unterscheidung: Die Tatsache ist, dass es unmöglich ist, sich zu erreichen, um sich mit verschiedenen Geschwindigkeiten mit nur CSS 3 zu bewegen, es ist unmöglich. Darüber hinaus wird dieser Standard nicht von allen modernen Browsern unterstützt. Daher gibt es hier Schwierigkeiten.

Ausgabe

Die Wirkung von Parallaxe, obwohl beliebt, aber nicht jeder ist eilig, es beim Erstellen einer Website wegen der obigen Probleme zu verwenden. Anscheinend brauchen Sie, während Sie nur Zeit brauchen, damit die Technologien die auftretenden Schwierigkeiten überwinden können. Inzwischen kann diese Option auf Single-Site-Sites verwendet werden: Daher wird es genau erinnert und den Benutzer behalten.

PararAllax auf Javascript.

  • jquery.-Effect Parallax-Scrollen - Plugin, das den Effekt von Parallaxe an die Bewegung des Mausrads bindet
  • Scrolldeck.- Plugin, um einen Parallaxe-Effekt zu erstellen
  • jparallax.- Schaltet die Elemente der Seite in absolut positionierte Schichten, die sich in Übereinstimmung mit der Maus bewegen

| 29.09.2014

Guten Tag, liebe LeserSchnitte Unsere heutige Bewertung, bestehend aus 10 Plätzen, ist nicht gewöhnliche Standorte gewidmet. Websites in dieser Top-10-Liste haben ein gemeinsames Merkmal - die Wirkung von Parallaxe.

Besonders für diejenigen, die immer noch nicht wissen, was es ist, werden wir uns kurz darüber erzählen, dass dieser Effekt bereits begonnen hat, intensiv intensiv intensiv zu gewinnen und im Bereich des Webdesigns zunehmend beliebt zu werden.

Der Parallaxeffekt oder das Scrollen von PararAllax ist also eine spezielle Technik, in der Objekte im Hintergrund langsamer werden als Objekte im Vordergrund. Aufgrund dessen ist der 3D-Effekt erstellt, erscheint ein Gefühl von dreidimensionaler Speicherplatz. Parallaxe Scrollen - großartige Weise Fügen Sie einem Highlight zu einer Seite hinzu, wiederbeleben Sie Infografiken, erzählen Sie die Geschichte oder demonstrieren Sie ein Portfolio. Und einige Werke moderner Designer können voller Vertrauen mit Kunstwerken genannt ... Es ist jedoch besser, einmal zu sehen, als mehr als hundert Mal zu hören - sehen Sie unsere Top-10-Websites und schauen Sie einen Blick darauf!

Beachten Sie: Einige Websites mit Parallax-Scrollen sind aufgrund einer Vielzahl von Effekten einfallsreich, daher schließt dies nicht "Folter" auf bestimmten Computern und tragbaren Geräten aus.

Grab & Go.

Der zehnte Platz in unserer Bewertung besetzt den Greifer & Go-Standort, wo der Parallaxeffekt als Dekoration verwendet wird und das Bild revitalisieren. Wenn Sie den Cursor bewegen, können Sie beobachten, wie gleichzeitig sich zu Hause und in den Bäumen im hinteren Hintergrund bewegt. Zuverlässig, auf Kosten dieser Rosine besteht die Möglichkeit, dass sich die Site besser an den Besucher erinnert.

Digitalhands.

Auf der Website von Digitalhands, die den 9. Platz besetzen, wird der Parallaxe-Effekt auch zum Erstellen des Parallaxa-Effekts verwendet und an den Besuchern erinnert. Bewegen Sie den Mauszeiger und genießen Sie einen besonderen Effekt.

Madwell.

Die New Yorker Creative Agency Madwell zeigt sein Portfolio an hauptseite Site, geschickt mit Parallaxeffekt. Das Gefühl von 3D verlässt den Benutzer nicht während des gesamten Zeitmodrolls.

Oakey.

Jedes Produkt braucht die richtige Idee. Auf der Website der Oakley PararAllax Scrolling-Website wird es verwendet, um die Vorteile von Airbrake MX zu demonstrieren. Es stellte sich ziemlich beeindruckend und informativ aus, da die Produkte von allen Seiten betrachtet und erforscht werden können, einfach mit der Schriftrolle.

Machen Sie Ihr Geld Materie

Nur wenige Menschen kümmern sich nicht um persönliche Finanzen. Die Website macht Ihr Geld Materie, die den 6. Platz unserer Bewertung genommen hat, in einer erschwinglichen Form offenbart das Publikum die Vorteile der Credit Union und erzählt über die Minus von Banken. Hier können Sie den Taschenrechner verwenden, der zeigt, wie Banken aufgrund von Kundeninvestitionen Banken erhalten sowie Niederlassungen an Kreditgenossenschaften auf dem Portoindex finden.

Raumnadel.

Möchten Sie Seattle aus einer Höhe von 184 Metern erkunden? Die Space Nadel-Website schickt Ihnen einen virtuellen Spaziergang entlang der erkennendsten Sehenswürdigkeiten der Stadtraumnadel, das auf Englisch ist, bedeutet "kosmische Nadel". Diese Turmhöhe beträgt 184 m, 42 m breit und mit einem Gewicht von 9.550 Tonnen hält Hurrikane in der Windgeschwindigkeit auf 320 km / h und Erdbeben von bis zu 9,1 Punkten. Darüber hinaus hat der Turm 25 Thunder. Ein unverwechselbares Merkmal Space Nidle ist eine Übersichtsseite in einer Höhe von 159 Metern, Skincity Restaurant und Geschenkeladen. Von ihren Scheitelpunkten sehen Sie das Zentrum von Seattle, Rainier-Vulkan, Cascade Mountains, Eliot Bay und die umliegenden Inseln.

Peugeot Hybrid4 - Grafikroman

Der größte französische Automobilhersteller Peugeot ist ziemlich außerordentlich präsentiert das Hybridantriebssystem Hybrid4. Vor unseren Augen öffnet sich ein aufregender Comic (das übrigens auf die automatische Reproduktion eingesetzt werden kann), wo die Aufgabe der Hauptfigur darin besteht, geheime Daten zu bekommen und zu verlassen, ohne in Schwierigkeiten zu gehen. Um den Betrieb erfolgreich auszuführen, wird es gezwungen, zwischen vier verschiedenen Bewegungsmodi zu wechseln, die Peugeot Hybrid4-Technologie - maximale Leistung und Dynamik (Sport), den gesamten Laufwerkmodus und den maximalen Schub (4WD), den Gleichgewicht zwischen Leistung und Speichern (automatisch), wechseln. , Ruhiger Betrieb (ZEV).

DIe laufenden Toten.

Also näherten wir uns an den dritten Platz in unserer Liste der Top-Sites, die zum Walking Dead-Projekt gingen. Bei der Erstellung eines Standorts, der anfangs an zahlreichen Fans der "Walking Dead" -Serie interessiert ist, verwendete HTML5, CSS3, Javascript und natürlich Parallaxe-Effekt. Die Entwickler haben einen tollen Job gemacht, und zwang alle diese Technologien zusammen und auf allen Plattformen. Anfahrt zur Site und mit dem Scrollen beginnen, sieht der Benutzer eine Comic-Geschichte darüber, wie Zombies Akteure tätigen.



Ein einzigartiges und einzigartiges Projekt, ein Teil der Sony "Die Kampagne" wird mit ihrem Volumen, Dynamik beeindruckend und dauert bis zu den kleinsten Details. Die beste Präsentation von Produkten als Sony ist wahrscheinlich nicht zu finden. Wörter sind unnötig - scrollen Sie einfach nach unten und genießen Sie es!



Flach vs. Realismus

Und schließlich erreichten wir den ersten Platz unserer Bewertung, der den Standort flach überlegte, vs. Realismus - die Idee der interaktiven Agentur intacto. Dieses Neujahrsprojekt mit spektakulären Grafiken (und musikalischer Begleitung!) Ist ein Minispiel-Genre des Kampfes mit einer interessanten Vorgeschichte, in der der Widerstand von Vertretern von zwei Arten von Design realistisch und flach ist. Nachdem er sich auf den Hauptholwomer Ende 2013 konzentriert hatte, verlor die Schöpfer nicht verloren: Nach der Ausfahrt verursachte dieser beeindruckende Job sofort Furore und wurde zu einem beliebten Diskussionsgegenstand in Blogs und Neuigkeiten.

Die Site-Entwickler gelang es, Parallax-Scrollen und das Spiel auf HTML5 zu vereinen. "Wir wollten es so schaffen, dass während des Scrollens der Site von Anfang bis Ende alle Aktionen reibungslos und unverzüglich auftreten. Dazu haben wir AJAX angewendet, was es ermöglichte, die Daten im Hintergrund zu aktualisieren, "erklärte der Creative Director der Alejandro Lazos-Agentur. Das Projekt wurde Ende 2013 vor dem neuen Jahr des Publikums vertreten. Machen Sie sich bereit, die Schriftrolle zu drehen, Sie warten auf eine Menge faszinierend!



Hinweis: Leider können einige Websites im Laufe der Zeit Ihr Design ändern.
Fortsetzung des Themas:
Netzwerk

EINLEITUNG Es ist passiert, dass, als die Zeit des nächsten Upgrades aufkam, fast alle Komponenten neuer. Und die alte, freundliche, gute ...