Parallax-Scrolling braucht keine Einführung, wenn es darum geht, die attraktivsten Designpraktiken zu diskutieren. Im Allgemeinen ist Parallax Scrolling auf WordPress-Websites weit verbreitet. Es ist ein Effekt, bei dem sich das Hintergrundbild langsamer bewegt als die Vordergrundelemente. Dies gibt die Illusion, drei Dimensionen in einer flachen zweidimensionalen Oberfläche zu haben. Viele Spiele nutzen diesen Trend schon seit langem. Allerdings hat er erst vor relativ kurzer Zeit seinen Weg ins Webdesign gefunden und massiv an Popularität gewonnen. Es ist so weit verbreitet, dass Sie es wahrscheinlich schon einmal gesehen haben, als Sie im Internet gesurft sind, auch wenn Sie nicht wussten, was es war. Das Konzept des Parallax-Scrollings arbeitet daran, eine Illusion zu schaffen, die ansprechend und einzigartig aussieht. Es verleiht dem Webdesign einen ästhetischen Wert und lenkt die Aufmerksamkeit auf den Inhalt der Parallax-Scroll, wodurch wertvolle Inhalte aus dem Durcheinander herausgehoben werden.
Inhaltsverzeichnis ausblenden
1. Die Benutzererfahrung verbessert sich erheblich:
2. Es unterstützt den Prozess des Geschichtenerzählens:
3. Signifikante Reduzierung der Absprungraten:
1. Parallaxe-Hintergrundrolle:
2. Vertikale Parallax-Scroll:
3. Parallax-Transparenzeffekt:
4. Parallaxe horizontale Scroll:
5. Parallax Scale-Effekt:
1. Denken Sie immer an das Hauptziel Ihrer Website:
2. Überbeanspruchen Sie den Parallax-Scrolling-Effekt nicht:
3. Erstellen Sie Prototypen für Parallax-Scrolling-Effekte und testen Sie sie: Pin
4. Planen Sie die Inhalte für die mobile Nutzung:
5. Reaktionsfähigkeit Ihrer Website:
1. Die Geschichte der Goonies:
2. Hundestudio:
3. Feuerwache:
Dieser Designtrend entstand, als der Flat-Design-Trend aufkam. Vor dem Flat-Design-Trend war Realismus-Design im Trend. Bei diesem Trend liegt der Schwerpunkt auf Schlagschatten, Reflexionen und anderen Tricks, um ein Gefühl von Tiefe und Dreidimensionalität zu erzeugen. Flaches Design war zu zweidimensional, und solche Tricks würden mit ihnen nicht funktionieren, um ein dreidimensionales Aussehen zu erzeugen. Angesichts dieser Lücke entstand das Parallax-Scrolling als Konzept, um drei Dimensionen in ein flaches Design einzuführen.
Um das Parallax-Scrolling genauer zu verstehen, sollten wir uns zunächst ansehen, warum es sich lohnt, in diese Praxis zu investieren.
1. Die Benutzererfahrung verbessert sich erheblich:
Stift
Einige Leute sind der Ansicht, dass Parallax-Scrolling ein zusätzliches Feature ist, das die Komplexität der Benutzeroberfläche ohne jeglichen Beitrag erhöht. Es ist jedoch nicht wahr, da Mikrointeraktionen und Animationen einen großen Unterschied machen, um ansprechende Benutzeroberflächen zu erstellen, verglichen mit flachen Benutzergesichtern. Es hat einen hervorragenden Wert in der Benutzererfahrung (UX).
2. Es unterstützt den Prozess des Geschichtenerzählens:
Stift
Wenn wir einer anderen Person eine Geschichte erzählen müssten, könnten wir das mühelos tun. Die gleiche Leichtigkeit und den gleichen Fluss des Geschichtenerzählens im Website-Design zu haben, kann jedoch sehr herausfordernd sein. Die Punkte zu verbinden, den Übergang zu erleichtern und das Publikum bei der Stange zu halten, ist oft schwierig. Parallax-Scrolling hilft bei diesem Problem, indem es ein fesselndes und immersives Erlebnis für den Fluss der Geschichte schafft. Da es einen Unterschied in der Geschwindigkeit der Hintergrund- und Vordergrundelemente gibt, kann ein effizientes Pacing der Elemente das Storytelling-Erlebnis erheblich verbessern.
3. Signifikante Reduzierung der Absprungraten:
Stift
Die Absprungrate bezieht sich auf die Anzahl der Personen, die auf die Website klicken und auf der Registerkarte auf die Schaltfläche „Zurück“ klicken, bevor sie die Website gründlich durchgegangen sind. Häufige und hohe Absprungraten können das SEO-Ranking erheblich beeinträchtigen. Parallax-Scrolling-Websites haben deutlich geringere Absprungraten, da die meisten von ihnen Single-Page-Scrolling-Websites sind. Die dynamische Erfahrung, die Benutzer durch das Parallax-Scrolling bekommen, hält sie beschäftigt.
Nachdem wir nun die Vorteile der Verwendung von Parallax-Scrolling behandelt haben, können wir die verschiedenen Arten von Parallax-Scrolling-Techniken diskutieren, die Webdesignern zur Verfügung stehen. Es gibt zwei große Kategorien für Parallaxeneffekte. Scroll-basierte Parallax-Effekte und Maus-basierte Parallax-Effekte.
Scrollbasierte Parallax-Effekte sind Parallax-Effekte, die Sie erleben würden, wenn Sie durch eine Website nach unten scrollen. Jede Art von Parallax-Scrolling erfüllt einen anderen Bedarf und Zweck. Einige der Parallax-Scrolling-Effekte sind –
1. Parallaxe-Hintergrundrolle:
Es ist eine der ältesten und dennoch effektivsten Methoden zur Verwendung von Parallax Scroll. Wenn der Benutzer auf diese Weise auf der Website scrollen würde, würde sich das Hintergrundbild ändern. Dies hilft, fesselnde Geschichten mit Stil zu erzählen.
2. Vertikale Parallax-Scroll:
Parallax Vertical Scroll ist ideal für Websites, bei denen Sie möchten, dass die Benutzer das Gefühl haben, dass sich die Website mit ihnen bewegt, indem Sie schwebende Elemente verwenden, die sich mit unterschiedlichen Geschwindigkeiten bewegen. Dies kann auch in mehreren Schichten erfolgen.
3. Parallax-Transparenzeffekt:
Der Parallax-Transparenzeffekt ist ein glatter Effekt, bei dem der Text oder das Bild langsam ausgeblendet wird, wenn der Benutzer nach unten scrollt. Es würde auch wieder eingeblendet, wenn der Benutzer nach oben scrollen würde.
4. Parallaxe horizontale Scroll:
Parallax Horizontal Scroll erzeugt ein Gefühl von horizontaler Bewegung, wenn der Benutzer die Website nach unten scrollt. Die Elemente auf der linken Seite nähern sich der Mitte. Dadurch entsteht ein Bewegungsgefühl.
5. Parallax Scale-Effekt:
Mit dem Parallax Scale Effect kann der Benutzer einen Tunneleffekt vergrößern und verkleinern. Der Zoom ist proportional zum Seitenverhältnis, sodass eine einzigartige Illusion entsteht, die cool aussieht. Es fühlt sich an wie ein Warping-Effekt, der den Benutzer in eine andere Dimension bringt.
Nachdem wir nun die verschiedenen Variationen von Parallax-Scrolling-Effekten besprochen haben, können wir mit der Diskussion wesentlicher Designpraktiken fortfahren, die Sie beim Entwerfen eines Parallax-Scrolling-Effekts für Ihre Website beachten sollten:
1. Denken Sie immer an das Hauptziel Ihrer Website:
Stift
Parallax-Scrolling macht Spaß und kann fesselnd werden. Nicht nur für die Zuschauer, sondern auch für den Designer. Dies sollte nicht dazu führen, dass eine Website einen beeindruckenden Parallax-Scrolling-Effekt hat und sich nicht auf den Inhalt konzentriert. Parallax-Scrolling sollte wie andere Designelemente als visuelle Hinweise dienen, die den Besucher zu den Orten führen, an denen Sie ihn haben möchten. Es sollte helfen, die Geschäftsziele wie den Verkauf eines Produkts, die Verbreitung von Inhalten oder die Generierung von Leads zu erreichen.
Wenn Sie das Parallax-Scrolling übermäßig ohne Kontext oder Zweck verwenden, könnten Sie beeindruckte Zuschauer auf Ihre Website locken, die jedoch nicht zu effektiven Leads oder Konversionen führen würden. Nutzen Sie Parallax-Scrolling, um die Wahrscheinlichkeit zu erhöhen, was der Benutzer tun soll. Ein ausgezeichneter Hack dafür ist das Anheften eines überzeugenden, aber subtilen CTA in der Fußzeile der Seite. Auf diese Weise würden die Benutzer, wenn sie durch die Website scrollen würden, das Parallax-Scrollen in Aktion sehen. Sie hätten auch ein oder zwei konstante Tasten, die statisch und allgegenwärtig sind. Dies würde den Besucher dazu bringen, auf die Schaltfläche zu klicken, um zu sehen, was passiert.
2. Überbeanspruchen Sie den Parallax-Scrolling-Effekt nicht:
Stift
Der Parallax-Scrolling-Effekt hat einen gewissen Wow-Faktor. Es bricht für die banale und stagnierende Natur jeder Website, die plötzliches Interesse im Auge des Besuchers weckt. Da sich beim Parallax-Scrolling die Elemente der Website unterschiedlich schnell bewegen, ist es beim Parallax-Scrolling essenziell, die richtige Balance zwischen Spaß und Chaos zu finden. Wenn die Website viele sich schnell bewegende Elemente oder auch zu viele sich bewegende Elemente enthält, kann es für den Besucher überwältigend werden, Schritt zu halten. Es würde ihren visuellen Leitfaden auf der ganzen Website stören und Verwirrung stiften.
3. Erstellen Sie Prototypen für Parallax-Scrolling-Effekte und testen Sie sie: Stift
Es ist immer eine gute Idee, einen interaktiven Prototypen zu bauen, bevor man ihn in der Entwicklungsphase fertigstellt. Dies hilft den Designern, ihren Parallax-Scrolling-Effekt zu testen, bevor sie ihn live schalten. Die Designer sollten die Auswirkung auf Usability und User Experience testen. Da die Parallaxe in ihrem Ansatz so vielseitig und unterschiedlich ist, kann sie verschiedene Menschen auf unterschiedliche Weise beeinflussen. Es ist leicht, von nützlicher Parallaxe abzuweichen und Parallax-Scrolling-Effekte zu erzeugen, die Ablenkung verursachen. Testen Sie es daher gründlich mit echten Benutzern, die objektiv sind und ein Gespür für Webdesign haben. Testen Sie es auch mit einem allgemeinen Publikum, da es diejenigen sind, für die Sie den Effekt erzielen.
4. Planen Sie die Inhalte für die mobile Nutzung:
Stift
Das Surfen im Netz ist nicht mehr auf Computer beschränkt. Stattdessen bevorzugen mehr als die Hälfte der Nutzer das Surfen auf ihren Smartphones und Tablets. Google hat auch seine Suchmaschinenergebnisse geändert, auf deren Grundlage die Websites für Mobilgeräte anders reguliert und eingestuft werden als für Desktop-Computer. Das bedeutet, dass Ihre Website, wenn sie beim Desktop-Browsing gut rankt, aber ein unfreundliches Design für Mobilgeräte hat, bei Google keinen hohen Rang einnehmen würde, wenn Sie sie über Ihr Telefon durchsuchen. Parallax-Scrolling ist nicht mobilfreundlich. Tablets unterstützen es bis zu einem gewissen Grad, aber keine Handys. Die praktische Lösung dafür besteht darin, keine Parallaxeneffekte für Ihre mobile Website zu verwenden.
Das grundlegende Layout Ihrer Website sollte so gestaltet sein, dass es leicht auf Mobilgeräte übersetzbar ist. Jeder Abschnitt, der sich überschneidet und überläuft, sollte beachtet werden. Die Hintergründe sollten der Lesbarkeit des Inhalts nicht entgegenstehen. Behalten Sie für die mobile Website nur die absolut notwendigen Designelemente bei. Dies würde Ihnen auf zwei Arten helfen – die Benutzer, die den Browser auf ihrem Handy verwenden, verwenden möglicherweise mobile Daten. Eine übersichtlichere Website würde ihnen helfen, die Website schneller zu laden und weniger Daten für das Durchsuchen Ihrer Website aufzuwenden. Es würde sich auch nicht auf Ihr SEO-Ranking auswirken.
5. Reaktionsfähigkeit Ihrer Website:
Stift
Wir haben keine Netzwerkverbindungen mehr, die Minuten oder Stunden brauchen, um eine Website zu laden. Jeder hat Zugriff auf das Internet mit einer Geschwindigkeit, bei der Benutzer für eine Sekunde auf einer Website sein und in einer weiteren Sekunde zu einer anderen wechseln könnten. Mit dieser Leichtigkeit der Geschwindigkeit kommt die Leichtigkeit der Optionen. Menschen durchsuchen jeden Tag mehrere Websites. Wenn Ihre Website nicht relativ schnell geladen wird, werden sie nicht warten, bis Ihre Website geladen ist und ihren erstaunlichen Parallaxeneffekt zeigt. Parallaxe ist ein schwerer Trick und selbst wenn Sie ihn optimieren; es würde einen Hit auf Seitenladezeit nehmen. Es wird Ihre Pflicht, es so weit wie möglich zu optimieren, wenn Sie das Gefühl haben, dass das Parallax-Scrolling einen wesentlichen Beitrag zu Ihrer Website leistet.
Nachdem wir nun alle Aspekte des Parallax-Scrollings verstanden haben und wissen, wie man das Beste daraus macht, schauen wir uns einige der Websites an, die Parallax-Scrolling erfolgreich und effizient in ihrem Website-Design implementiert haben:
1. Die Geschichte der Goonies:
Stift
Diese Website verwendete einen speziellen Parallax-Scrolling-Effekt, um den klassischen Film The Goonies hervorzuheben. Es verwendet immersives Parallax-Scrolling, um über die Filmhandlung und andere Details wie den Namen des Regisseurs, das Erscheinungsdatum, Charakterprofile und mehr zu sprechen. Es wird mit WebFlow erstellt und ist eine Hommage an den Filmklassiker. Wenn Sie die Website besuchen, verwendet die erste Interaktion den Parallax Scale Effect, der dem Benutzer das Gefühl vermittelt, mit der Website in die Geschichte zu reisen. Jeder Parallaxeneffekt wird verwendet, um visuelle Hinweise für den Besucher zu lenken, und es ist mühelos möglich. Es verwendet auch Audio für ein immersives Storytelling-Erlebnis.
2. Hundestudio:
Stift
Dogstudio ist ein kreatives Studio, das Kunst, Technologie und Design verbindet. Um dies zu demonstrieren, haben sie ihre Website clever gestaltet. In der Mitte der Website befindet sich ein Hund, der skaliert und rotiert, während der Benutzer weiter durch die Website scrollt. Das Licht auf dem Hund ändert sich auch ständig, wenn Sie mit der Maus über ihre letzten Projekte fahren. Es gibt auch mausbasierte Parallaxeneffekte. Wenn Sie am Anfang der Webseite mit der Maus nach links fahren, neigt sich der Hund nach rechts und umgekehrt. Es ist eine effektive Verwendung von Parallax-Scrolling.
3. Feuerwache:
Stift
Firewatch ist ein Spiel, das von Campo Santo entwickelt wurde. Es gibt eine Website zur Förderung dieses Spiels, die subtilen, aber höchst eindrucksvollen Gebrauch von Parallax-Scrolling macht. Wenn Sie die Website besuchen, werden Sie mit einem Bannerbild behandelt, das so immersiv aussieht, wie es ist. Wenn Sie die Website nach unten scrollen, bewegen sich das Bild und der Inhalt nach oben, wodurch ein einfacher, aber effektiver Parallax-Scrolling-Effekt entsteht. Die Website verwendet 6 Ebenen, um sie so reibungslos wie möglich zu gestalten. Der Rest der Website ist statisch, wo sich alle Inhalte befinden. Dies hilft Ihnen, den Inhalt zu lesen und sich mit dem Spiel vertraut zu machen, ohne sich wegen übermäßig gemachter Parallaxeneffekte seekrank zu fühlen. Sie verwenden einen Parallaxeneffekt, um die Aufmerksamkeit zu erregen, und liefern dann relevante Informationen, um das Interesse des Besuchers zu wecken.
Jetzt wissen Sie, warum Parallax Scrolling ein Designtrend ist, der in der heutigen Zeit so beliebt ist. Es hat viele Vorteile, die Webdesigner ausnutzen können. Aufgrund der vielen verfügbaren Variationen des Parallax-Scrollings gibt es keinen Spielraum für Wiederholungen mit einer anderen Website. Die in dieser Liste erwähnten Websites behandeln auch, wie der Effekt vollständig für den Zweck des Geschichtenerzählens oder als zusätzliches Element verwendet werden kann, um das Gefühl der Website zu verbessern. Verstehen Sie, warum und wo Sie Parallax-Scrolling auf Ihrer Website verwenden müssen, und nutzen Sie es. Zwingen Sie es nicht nur wegen des ästhetischen Werts hinein.
