Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Parallax Scrolling
Webdesign

Erstellen Sie eine Parallax Scrolling-Website mit Stellar.js

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Einer der größten Trends im modernen Webdesign der Gegenwart ist die Verwendung von Parallax Scrolling-Effekten. In diesem Tutorial werde ich Ihnen zeigen, wie Sie den Effekt auf Ihrer eigenen Website mit ein wenig Phantasie und ein wenig Hilfe von Stellar.js erstellen können.

Einführung

Der Parallax Scrolling-Effekt ist seit der Einführung von Nike's Better World auf ihren Webseiten vor einigen Jahren populär. Der Parallax-Effekt in Bezug auf Schnittstellen existiert seit den 1980er Jahren, als er zuerst in Videospieltiteln und anschließend in Spielen selbst verwendet wurde. In jüngerer Zeit begann es, in Web-Interfaces zu erscheinen - Sie werden mit silverbackapp vertraut sein, das den Effekt als Teil des Headers verwendet hat.

In Kombination mit der Bildlauffunktion einer Website können Parallax-Scrolling-Effekte eine starke visuelle Wirkung haben, besonders wenn sie mit einer Art Story kombiniert werden, die Sie auf eine Reise mitnimmt.


Para ... Was?

Parallaxe ist eine Verschiebung oder ein Unterschied in der scheinbaren Position eines Objekts, betrachtet entlang zweier verschiedener Sichtlinien. - Wikipedia

Was genau ist der Parallax-Effekt? Nun, es ist wahrscheinlich eines der Dinge, auf die sich Ihre Kunden beziehen, wenn sie blind sagen "Ich will meine Website HTML5". Immer wenn Kunden mich nach einer "HTML5" -Seite fragen, muss ich sie genau fragen, wie sie die Bedeutung von HTML5 interpretieren - im Moment scheint es nur das Schlagwort zu sein, das Kunden mir immer wieder sagen, ohne wirklich zu verstehen, was es bedeutet.

So ist es HTML5? Sure HTML5 hat eine Rolle im Parallax-Scrolling-Effekt, aber es ist mehr als HTML5, es nutzt auch eine Form von Javascript, wie jQuery, und wäre ohne ein wenig CSS3 nicht möglich.

Das eigentliche Wort Parallaxe stammt aus dem Griechischen παραλλαξη (Parallaxis), was Veränderung bedeutet. Objects which are closer to the eye have a larger parallax than objects which are in the distance. Dies bedeutet, dass Objekte, die näher bei uns sind, sich scheinbar schneller bewegen als Objekte im Hintergrund.

Wenn Sie mehrere Hintergründe und Objekte (z. B. Bilder) übereinander legen und sich dann mit unterschiedlichen Geschwindigkeiten bewegen, entsteht ein Gefühl von Tiefe und Dimension.


Parallaxe in Aktion

Schauen Sie sich einige Beispiele an, die Parallaxeneffekte zeigen.

Saucony
Lois Jeans
Nike Jump man
Bomb girls
Tokiolab
Intacto

Jede Website erzählt eine Geschichte

Die Beispiele nehmen Sie auf eine Art Reise oder Geschichte mit, und zwar auf verschiedene Arten. Dies macht meiner Meinung nach eine Parallax Scrolling Site zu einem Erfolg. Der Schlüssel, um es interessant und einzigartig zu machen, besteht darin, sich auf eine gute Geschichte und ein Konzept zu konzentrieren und den Effekt dann auf kreative und phantasievolle Weise zu nutzen.

Wieden + Kennedy (W&K), die Jungs hinter der Nike Better World Website unterstützen dies:

Unserer Meinung nach sind Technologien unabhängig vom Konzept. Unser Hauptaugenmerk lag auf der Erstellung eines großartigen interaktiven Storytelling-Erlebnisses. - Wieden+Kennedy (W&K)


Wie unsere Seite funktionieren wird

Um eine Möglichkeit zu demonstrieren, Parallax Scrolling in Ihre Website zu implementieren, habe ich entschieden, Ihnen eine einfache Website mit vier Folien zu zeigen, die den Effekt auf verschiedenen Hintergründen und Bildern verwendet. Ich habe auch eine Navigation in der linken Ecke hinzugefügt, die zu einer bestimmten Folie auf der Website scrollt und auch die Größe entsprechend der aktiven Foliennummer ändert. Ich benutze auch die Webschrift Bebas, obwohl du frei hast, etwas anderes zu benutzen, wenn du es möchtest.

So wird unsere Ordnerstruktur aussehen:

parallax website folder structure

Die verwendeten Plugins

Stellar.js

Um mir dabei zu helfen, benutze ich das Stellar.js, ein Jquery-Plugin von Mark Dalgleish, das es einfach macht, Parallax-Scroll-Seiten zu erstellen. Es gibt andere Plugins, die Ihnen helfen können, dies zu tun, was ich am Ende dieses Artikels aufgelistet habe. Ich habe mich dafür entschieden, Stellar.js zu verwenden, da es relativ einfach zu implementieren ist. Obwohl es in diesem Lernprogramm nicht gezeigt wird, kann es optimiert werden, um auf intelligenten Geräteplattformen wie iOS zu funktionieren.

Waypoints.js

Ich werde auch jQuery Wegpunkte von Caleb Troughton verwenden. Wegpunkte ist ein weiteres jQuery-Plugin, das eine Funktion ausführt, wenn Sie zu einem Element blättern. Dies ermöglicht es der Navigation auf der Website, abhängig von der Position der Bildlaufleiste, auf welcher Folie wir uns befinden.

jQuery Easing

jQuery easing ist ein Plugin von GSGD, das erweiterte Beschleunigungsoptionen bietet. Wir werden dies verwenden, um beim Übergang von Folie zu Folie eine schöne Beschleunigungsbewegung hinzuzufügen.


Das HTML-Markup

Wenn wir unseren index.html starten, fügen wir den HTML5 Doctype hinzu und erstellen dann den Kopfbereich. Dies besteht aus einem CSS-Reset gefolgt von unserem Stylesheet 'styles.css'. Wir fügen dann die jQuery-Bibliothek gefolgt von unserer benutzerdefinierten jQuery-Datei 'js.js' hinzu. Danach folgen die drei Plugins 'jquery.stellar.min.js', 'waypoints.min.js' und 'jquery.easing.1.3.js'.

Das nächste Element in unserem HTML ist das Bild des Envato-Logos, das auf der gesamten Website in einer konstanten festen Position bleibt. Dazu fügen wir eine Klasse von 'envatologo' hinzu, so dass wir die Positionierung später festlegen können, wenn wir das CSS kodieren.

Die Folien

Die vier Folien verwenden das gleiche Markup:

Wir verwenden eine Klasse von "Folien", die als allgemeiner Stil für alle Folien verwendet werden. Jede Folie erhält dann die ID "Folie" gefolgt von der Foliennummer, z. B. "Folie1". Wir verwenden das HTML5-Datenattribut und nennen es "Daten-Folie". Dies ermöglicht es uns, mit jQuery darauf zu zielen. Ein weiteres Datenattribut von 'Data-stellar-background-ratio' wird hinzugefügt. Dies ist spezifisch für das stellar.js jQuery-Plugin und teilt dem Plugin mit, in welchem Verhältnis die Geschwindigkeit des Elements scrollen soll.

Das Verhältnis ist relativ zur natürlichen Scrollgeschwindigkeit, so dass ein Verhältnis von 0,5 dazu führen würde, dass das Element mit halber Geschwindigkeit scrollt, ein Verhältnis von 1 hätte keine Wirkung, und ein Verhältnis von 2 würde das Element mit der doppelten Geschwindigkeit scrollen lassen.

Alle Folien außer Folie vier haben eine Schaltfläche, mit der wir zur nächsten Folie blättern können. Dazu fügen wir das 'data-slide'-Attribut mit dem Wert der nächsten Foliennummer hinzu. Dies ist so, dass die Schaltfläche weiß, welche Folie als nächstes ist, so dass wir diesen Wert an jQuery übergeben können. Die Mehrheit der Folien hat auch eine Spanne mit einer Klasse von 'Slideno'; einfach eine große Textversion der Foliennummer, die in der unteren linken Ecke der meisten Folien erscheint. Dies könnte auch für Titel verwendet werden.

Auf den Dias drei und vier fügen wir auch einige Bildelemente zum "Dias" -Div hinzu. Diese Bilder geben einen echten Einblick in den Parallaxeneffekt, den wir erzeugen. Wir verpacken diese in ein 'Wrapper' Div, das zentralisiert ist und '960px' breit ist, das ist nur um sicherzustellen, dass es über alle Desktop-Monitorgrößen hinweg OK anzeigt.

Jedem Bild ist ein "Data-stellar-ratio" -Attribut zugeordnet. Dies ist wiederum stellar.js spezifisch und teilt dem Plugin mit, in welchem Verhältnis der Geschwindigkeit wir das Element scrollen sollen.


Das CSS

Zum Glück ist für uns nicht allzu viel mit dem CSS verbunden. Es ist im Grunde ein paar einfache Elemente, aber die Mehrheit ist für die Positionierung einiger der Bildelemente.

Das erste, was wir mit Ihrem CSS tun müssen, ist die Verwendung von @ font-face in der BEBAS-Schriftart. Wir fügen das dann dem HTML hinzu, um die Schriftart für die Site festzulegen. Wir setzen auch die Breite und Höhe von HTML und Body auf 100%. Dadurch können unsere Folien die volle Breite und Höhe des Benutzerbildschirms annehmen.

Die Navigation

Die Hauptnavigation erhält eine "feste" Position, um sie auf der gesamten Site an derselben Stelle zu halten. Wir haben diese 20px von oben nach oben versetzt, um ein wenig mehr Platz darüber zu geben, und setzen den Z-Index auf 1, um sicherzustellen, dass sich dies auf der obersten Ebene der Site befindet.

Die tatsächliche Liste ist nur das Styling des Textes mit einem unteren Rand, der als Unterstreichung dient. Dies hat eine Breite von 53px. Ein Übergang wird ebenfalls hinzugefügt, so dass er von seinem Standardzustand in seinen Schwebezustand animiert. Ich habe das Präfix -webkit hier nur verwendet, um den Code kurz zu halten, aber der vollständige Quellcode, der oben heruntergeladen werden kann, enthält alle Herstellerpräfixe.

Der Hover-Status verwendet auch dieselben Eigenschaften wie die Klasse 'active'; im Grunde nur eine Zunahme der Schriftgröße und -breite. Die Klasse 'active' wird von jQuery verwendet, um die relevante Folie zu formatieren, die sich im Browserfenster befindet.

Das envato-Logo erhält einige Positionierungsstile, um sicherzustellen, dass es in der Mitte des Bildschirms bleibt. Ähnlich wie bei der Navigation wird auch hier ein Z-Index von '1' vergeben, um sicherzustellen, dass er oben bleibt.

Jetzt gehen wir zum Styling der eigentlichen Folien über. Wir geben ihnen eine "fixed" -Eigenschaft im Hintergrund-Anhang. Die Eigenschaft background-attachment legt fest, ob ein Hintergrundbild fixiert ist oder mit dem Rest der Seite scrollt. Dies ist nützlich für Hintergrundbilder (z. B. auf Folie 4). Für dieses Beispiel haben wir ein Wallpaper von Philipp Seiffert verwendet, das hier heruntergeladen werden kann. Wir setzen die Position der Folie auf "relativ". Dies ist, dass wir die Klassen "slideno" und "button" gegen die Folie im Gegensatz zum eigentlichen Dokument absolut positionieren können.

Der Boxschatten dient ausschließlich der Dekoration und fügt dem oberen Teil jeder Folie einen schönen Schlagschatten hinzu.

Die Schaltfläche. Ist für die Schaltfläche am unteren Rand der Seite, mit der wir zur nächsten Folie weitergehen können. Wir haben es unten in der Mitte jeder Folie positioniert und ein Bild eines Pfeils als Indikator verwendet.

Das Styling für jede einzelne Folie ist relativ einfach und folgt jedes Mal dem gleichen Muster. Slide one has a background color of '#5c9900'. Auf Folie zwei ist auch eine Hintergrundfarbe festgelegt. Slide two also contains images and we can target each one by using the CSS Selector nth-child(n). Dieser Selektor kann als beschrieben werden

Diese Pseudoklasse stimmt Elemente auf der Grundlage ihrer Positionen in der Liste der untergeordneten Elemente eines übergeordneten Elements ab.

Wir gestalten also jedes Bild in der Reihenfolge, in der es in unserem Markup erscheint. Wir positionieren sie einfach relativ zum Wrapper der Folie.

Folie drei folgt der gleichen Farbe wie Folie zwei.

Folie vier ist etwas anders als die vorherigen zwei Folien, da es keine Bildelemente oder eine Hintergrundfarbe enthält, sondern stattdessen ein Hintergrundbild verwendet. Wir haben es auch der CSS3-Eigenschaft 'background-size: cover' gegeben. Dadurch wird das Hintergrundbild im Allgemeinen so eingestellt, dass es das gesamte Browserfenster abdeckt. Die Größe des Hintergrunds wird mit der Größe des Browserfensters angepasst. Wir haben auch eine Zeile Text auf der letzten Folie, die wir gestylt haben, hinzugefügt und eine Klasse von 'parallaxbg' gegeben.


Die jQuery

Die jQuery ist wirklich, wo dieses Ding zum Leben erwacht. Ich habe den Code kommentiert, damit Sie genau sehen können, was passiert.


Nur ein paar Punkte

Create a Parallax Scrolling Website using Stellarjs envato

Wenn Sie sich Folie 2 unseres Beispiels ansehen, werden Sie die 3D-Blasen bemerken. Ich habe einige von ihnen mit einer leichten Gaußschen Unschärfe versehen, vor allem denen im Vordergrund und im Hintergrund. Kombiniert man diese mit scharf fokussierten Bläschen, kommt das Gefühl der Tiefe hinzu, das die Parallaxe erzeugt. Dies ist etwas, das Sie vielleicht in Betracht ziehen sollten, wenn Sie versuchen, eine gute Tiefe für Ihre Website zu erreichen.

Viele Websites, die diesen Effekt nutzen, neigen dazu, ziemlich Image-schwer zu sein, stellen Sie sicher, dass Sie Ihre Bilder so viel wie möglich komprimieren (ohne Qualität zu opfern). Wenn es nach der Komprimierung noch eine Weile dauert, um es zu laden, dann überlegen Sie sich, einen Loader zu Ihrer Site hinzuzufügen.


Schlussfolgerung

Parallax Scrolling ist eine der beliebtesten Effekte der letzten Zeit und die Leute drängen ständig die Grenzen damit. Hier habe ich Ihnen heute gezeigt, wie Sie eine grundlegende Website einrichten, die Parallax Scrolling verwendet. Die Demo, die ich heute gezeigt habe, ist eine relativ einfache Seite für Lernzwecke. Für diejenigen unter Ihnen, die eine Seite mit diesem Effekt erstellen möchten, empfehle ich Ihnen, Zeit mit dem Konzept und der Geschichte zu verbringen, denn dies macht sie einzigartig, teilbar und in der Tat ein Vergnügen zu stöbern. It's about how you can utilize this effect wisely and not just using it for the sake of using it.

Ich hoffe, du hast es genossen, über Parallax-Scrolling zu lesen, und ich würde gerne sehen, wie ihr es auf eurer eigenen Seite benutzt habt. Fühlt euch frei, Links zu ihnen unten zu hinterlassen. Bis zum nächsten Mal!


Weitere Links lesen und Ressourcen

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.