Parallaxe ist Parallaxe-Effekt: Beispiele

Inhaltsverzeichnis:

Parallaxe ist Parallaxe-Effekt: Beispiele
Parallaxe ist Parallaxe-Effekt: Beispiele
Anonim

In Bewegung bedeutet Parallaxe eine Änderung der Position eines Objekts vor einem bestimmten Hintergrund relativ zu einem Beobachter, der sich an Ort und Stelle befindet. Dieser Begriff hat im Internet an Popularität gewonnen. Insbesondere die Seite sieht interessant aus, in deren Design es dynamische Elemente gibt. Parallaxe ist eine Gest altungstechnik für Webseiten, die von Webmastern verwendet wird, um eine große Anzahl von Besuchern anzuziehen.

Wie ist Parallaxe?

Parallax-Scrolling kann sowohl vertikal als auch in gerader Linie verwendet werden. Nintendo ist das beste Beispiel. Viele von uns erinnern sich mit Nostalgie an Computerspiele, dargestellt durch die Bewegung der Hauptfiguren von der linken Seite des Bildschirms nach rechts. Es ist auch eine Abwärtsbewegung möglich, die entlang einer senkrecht stehenden Geraden erfolgt. Der Parallax-Effekt im Web wird oft verwendet. Sie können JavaScript oder CSS verwenden, um einen vertikalen Schieberegler zu erstellen. 3.

Die beschriebene dreidimensionale Raumwirkung ist eben charakteristisch für sie. Die Schöpfer der Spiele verwendeten mehrere Hintergrundebenen. Sie unterscheiden sich in der Textur, während die Bewegung mit unterschiedlichen ausgeführt wirdGeschwindigkeit.

Glaube nicht, dass Parallaxe nur ein 3D-Effekt ist. Auf der Seite können Sie die vorhandenen Symbole verschieben. Außerdem sieht es sehr attraktiv aus. Eine besonders gute Option ist es, für jeden von ihnen eine individuelle Trajektorie zu verwenden. In diesem Fall werden verschiedene Symbole verwendet, die sich auf verschiedenen Bahnen bewegen. Dieses Design erregt Aufmerksamkeit.

Parallaxe ist
Parallaxe ist

Bild erwacht zum Leben

Es ist schwer, eine Seite ohne Bilder zu finden. Hochwertige und anschauliche Zeichnungen ziehen die Besucher an. Die meiste Aufmerksamkeit wird jedoch auf verschiedene Arten dynamischer Bilder gelenkt. Denn wenn es beim Besuch einer Seite Bewegung gibt, dann erregt das Aufmerksamkeit. Erhöht die Wahrscheinlichkeit, dass ein Besucher zu einer Ressource zu einem dynamischen Bild zurückkehrt, erheblich. Schien es sich zu bewegen oder nicht? Um Besucher auf die Website zu locken, lohnt es sich daher, so etwas wie den Parallaxeneffekt zu untersuchen.

Beispiele für Bewegtbildseiten:

  • hvorostovsky.com;
  • www.kagisointeractive.com.

Wie in den Beispielen gezeigt, wird das Erlebnis durch Dropdown-Menüs in Unterpunkte verbessert. Ein solches Element spart den Besuchern Zeit und ist daher für sie attraktiv.

jQuery-Bibliothek

Der Begriff jQueryParallax definiert die gleichnamige Bibliothek. Dadurch ist es einfach, den Bewegungseffekt im 3D-Format zu erzielen. In der jQuery-Bibliothek wird die 3D-Wahrnehmung auf vielfältige Weise erzeugt. Eine davon besteht in der horizontalen gleichzeitigen Bewegung von Hintergrundobjekten mitunterschiedliche Geschwindigkeit. Diese Bibliothek ist durch das Vorhandensein einer großen Anzahl unterschiedlicher Arten von Eigenschaften gekennzeichnet. Und die hier beschriebene Verdrängung ist nur ein kleiner Teil seiner Möglichkeiten.

Die Seite sieht sehr attraktiv aus, für deren Erstellung verschiedene moderne Elemente verwendet wurden. Eine davon ist Parallaxe. Beispielseiten könnten so aussehen:

  • www.grabandgo.pt;
  • www.fishy.com.br;
  • www.noleath.com;
  • buysellwebsite.com.

jParallax wird durch Ebenen dargestellt, die sich mit der Maus bewegen. Dynamische Elemente zeichnen sich durch eine absolute Positionierung aus (position:absolute;). Jeder von ihnen zeichnet sich durch seine eigene Größe und Bewegung mit einer individuellen Geschwindigkeit aus. Es kann sich um Text oder ein Bild handeln (auf Anfrage der Ersteller der Ressource).

Parallax-Scrolling
Parallax-Scrolling

Wahrnehmung des Seitenbesuchers

Danach achtet eine Person in der Regel darauf, dass die Seite hochwertig, bequem und sachkundig gest altet ist. Diese Tatsache wird normalerweise respektiert. Es kommt vor, dass Neugier entsteht, andere Elemente auszuprobieren. Es gibt eine große Anzahl identischer Seiten im Internet. Wie machen Sie Ihre Ressource zu etwas Besonderem?

Wenn dir das Design gefällt, bleibt der Besucher länger. Somit steigt die Wahrscheinlichkeit, dass er von den geposteten Informationen angezogen wird, er wird Interesse zeigen. Als Ergebnis wird eine Person die angebotene Dienstleistung, das Produkt oder das Werbeangebot nutzen.

Alte Lieblingsspiele

Das Konzept der "Parallaxe" sollte jedem bekannt seinKonsolenfans der 80er und 90er. Dies gilt für Spiele:

  1. Mario Bros.
  2. Mortal Kombat.
  3. Straßen der Wut.
  4. Mondpatrouille.
  5. Schildkröten in der Zeit.

Das heißt, Parallaxe ist eine Technik, die seit ziemlich langer Zeit verwendet wird. An diese Spiele erinnert man sich wirklich mit etwas Nostalgie. Immerhin scheinen sie vom Charakter dieser Zeit durchdrungen zu sein.

Bilder auf dem Bildschirm werden mit einer Technik wie Parallax-Scrolling erstellt. Es ist nicht verwunderlich, dass diese Technik wohlverdiente Popularität erlangt hat. Dieses Designkonzept kommt bei denjenigen gut an, die in den 80er-90er Jahren gespielt oder der Freizeit von Freunden zugeschaut haben.

wie man Parallaxe macht
wie man Parallaxe macht

Parallax-Scrolling

Vermarkter der weltweit führenden Marken nutzen seit langem alle möglichen technischen Fortschritte. So wird es möglich, selbst einen gelegentlichen Besucher für die Website zu interessieren.

Parallax-Scrolling wurde recht erfolgreich von Nike eingesetzt. Die ursprüngliche Website des Unternehmens wurde von Weiden und Kennedy entworfen. Aber dieses Design hat nicht überlebt. Die Ressource wurde nach und nach entsprechend den Trends unserer Zeit aktualisiert. Activatedrinks.com ist ein Beispiel für eine Website, deren Design an das der damaligen Nike-Vermarkter erinnert.

Parallaxe Beispiele
Parallaxe Beispiele

Lautsprecher sollten nicht zu viel sein

Vergessen Sie nicht, dass das Design der Website oft das Schlüsselkriterium ist, das den Besucher leitet. Schlecht ausgeführtDie Ressource hinterlässt beim Benutzer normalerweise den Eindruck der Frivolität des Eigentümerunternehmens. Aber eine Seite mit allen möglichen attraktiven Designelementen zeigt den Wunsch der Eigentümer der Organisation, Besucher zu interessieren.

Hier lohnt es sich, sich an die Parallaxe zu erinnern. Dies ist ein wunderbares Werkzeug. Aber auch sie sollten sich nicht zu sehr hinreißen lassen. Denn die Seite, auf der sich eine Vielzahl unterschiedlicher beweglicher Elemente befinden, ist recht schwer zu erkennen. Es ist am besten, das Design moderat stilvoll und verständlich zu gest alten.

Dynamic sollten einzelne Elemente sein, die ausgewählt werden müssen. Es kann auch ein Bild geben, das mit Ebenen erstellt wird, die sich relativ zueinander bewegen. Vergessen Sie nicht, dass die Benutzerseite in erster Linie für Besucher gedacht ist. Es muss kein Meisterwerk eines Webmasters sein, der sein ganzes Wissen hineingesteckt hat. Schließlich wird ein solcher Ansatz die Wahrnehmung nur erschweren.

Parallax-Effekt für Website
Parallax-Effekt für Website

So erstellen Sie eine Seitennavigation

Wie macht man Parallaxe? Diese Frage interessiert viele Website-Ersteller. Es ist nicht erforderlich, die Feinheiten des Schreibens von Tags zu kennen. Es ist sehr praktisch, spezielle Ressourcen im Internet zu verwenden. Aus der Vielzahl der verfügbaren Vorschläge lassen sich folgende Helfer unterscheiden:

  1. Plax ist ein ziemlich einfach zu bedienendes Programm. Es neigt dazu, die Seite durch Bewegen der Maus flüssig zu machen.
  2. jQuery Parallax Image Slider - Ein jQuery-Plugin zum Erstellen von Bild-Slidern.
  3. Jquery Image Parallax - geeignet zum Entwerfen von transparenten Zeichnungen. Durch seine Verwendung von PNGs gewinnen GIFs Tiefe, animiert durch Bewegung.
  4. Curtain.js wird verwendet, um eine Seite mit festen Panels zu erstellen. In diesem Fall wird die Wirkung des Öffnens der Vorhänge beobachtet.
  5. Scrolling Parallax: Ein jQuery-Plugin soll beim Scrollen des Mausrads einen Parallax-Effekt erzeugen.
Parallaxe am Cursor verankert
Parallaxe am Cursor verankert

Einige weitere nützliche Plugins

Wie Sie wissen, sind Informationen von größtem Wert. Und je mehr Möglichkeiten bekannt sind, das Gewünschte zu erreichen, desto geringer ist die Wahrscheinlichkeit, das richtige Ergebnis zu erh alten. Nützliche Plugins zum Erstellen von Dynamiken:

  1. jQuery Scroll Path - wird verwendet, um Objekte auf dem angegebenen Pfad zu platzieren.
  2. Scrollorama ist ein jQuery-Plugin. Es dient als Werkzeug für ansprechende Materialgest altung. Ermöglicht es Ihnen, den Text auf der Seite durch bequemes Scrollen "wiederzubeleben".
  3. Scrolldeck ist ein jQuery-Plugin. Es ist eine großartige Präsentationslösung für Websites mit einer Seite.
  4. jParallax stellt die Bewegung von Ebenen in Abhängigkeit von der Bewegung des Mauszeigers dar.
  5. Stellar.js ist ein Plugin, mit dem jedes Element mit dem Zusatz eines Parallax-Scrolling-Effekts gest altet wird.
Beispiele für Parallax-Effekte
Beispiele für Parallax-Effekte

Parallaxe am Cursor verankert

Diese Parallaxe sieht ziemlich beeindruckend aus. Bewegungslos auf den ersten BlickSite-Seiten-Objekte bewegen sich, wenn sich der Mauszeiger nähert. Es scheint zum Leben zu erwachen und folgt dem bewegten Element.

Zunächst solltest du beim Bild anh alten. Das gewünschte Bild wird in einen Rahmen gelegt, dessen Ränder ausgeblendet werden müssen. Die Methode ist sehr einfach und die resultierende Zeichnung sieht sehr attraktiv aus.

Der Parallax-Effekt für die Website ist eine wunderbare Art der Gest altung. Seine Verwendung weist darauf hin, dass der Erstellung der Ressource gebührende Aufmerksamkeit geschenkt wurde. Daher lohnt es sich, auf die angebotenen Dienstleistungen oder Informationen zu achten. Vor dem Hintergrund identischer, aber einfach gest alteter Ressourcen wirken solche Seiten vorteilhafter.

Empfohlen: