Erstellen Sie einen mausgesteuerten Parallaxen-Hintergrundeffekt

Parallaxen-Maus-Site
(Bildnachweis: Renaud Rohlinger)

Websites mit Parallaxen-Bildlauf sind aus einem bestimmten Grund weiterhin beliebt: Sie bieten dem Benutzer ein angenehmes und ansprechendes Surferlebnis. Wir haben uns schon die beste Betäubung angesehen Parallaxen-Scrollen Websites, die Sie inspirieren, aber was tun Sie, wenn Sie eine eigene erstellen möchten?

Glücklicherweise ist der französische Kreativentwickler Renaud Rohlinger hier, um Ihnen die Möglichkeiten zu zeigen, wie Sie einen Parallaxen-Scroll-Hintergrund erstellen, den Sie mit Ihrer Maus steuern können. Schauen Sie sich die erstaunlichen Ergebnisse an seine Seite und lernen Sie dann unten von Rohlinger selbst, wie Sie den Effekt in Ihrem nächsten Projekt replizieren können.

Sie können auch eines davon ausprobieren Website-Ersteller und während Sie über die Leistung Ihrer Website nachdenken, überprüfen Sie Ihre Web-Hosting Service arbeitet für Sie. Hast du eine medienintensive Seite? Sichern Sie mit zuverlässig Cloud-Speicher .



01. Definieren Sie das HTML-Dokument-Framework

Parallaxen-Maus-Site

Die Site öffnet sich zu einem monochromen Begrüßungsbildschirm und stellt animierte 3D-Hintergründe sofort japanischer Typografie gegenüber(Bildnachweis: Renaud Rohlinger)

Der erste Schritt besteht darin, das Framework des HTML-Dokuments zu definieren. Dies besteht aus dem HTML-Container, der beschreibt, dass das Dokument Abschnitte für Kopf und Körper enthält. Während der Kopfabschnitt die externen JavaScript- und CSS-Dateien verknüpft, werden im Schrittabschnitt die Seiteninhaltselemente in Schritt 2 definiert.

Oberfläche Pro 6 vs Oberfläche Pro 5
Parallax Background *** STEP 2 HERE

02. Identifizieren Sie den HTML-Inhalt

Der Body-Inhalt besteht aus Anzeigetext und einem Div-Container mit dem Datenparallaxe Attribut. Dieses Containerelement wird für den Parallaxenhintergrund verwendet, wobei jedes seiner untergeordneten Elemente mit den erforderlichen Hintergrundbildern gestaltet wird. In diesem Beispiel verfügt der Container über drei Bildebenen, die aus den untergeordneten div-Elementen erstellt werden.

Hello!

03. Erstellen Sie einen CSS-Parallaxencontainer

Parallaxen-Maus-Site

Wenn Sie nach unten scrollen, werden die Dinge bunter, und Sie werden ermutigt, dem Katzencharakter zu folgen und sich zum Hauptportfolio durchzuklicken(Bildnachweis: Renaud Rohlinger)

Erstellen Sie eine neue Datei mit dem Namen styles.css . Im ersten Schritt dieser Datei werden die Standardinhaltsfarbe Weiß und die Einstellungen für den Parallaxen-Hintergrundcontainer festgelegt. Der Parallaxencontainer wird fest positioniert, damit er an derselben Position bleibt, an der der Inhalt darüber rollt. Als Seitenfarbe wird eine Standardfarbe angewendet, während ein negativer Z-Index ermöglicht, dass der Container unter dem Seiteninhalt angezeigt wird.

html, body{ color: #fff; } [data-parallax]{ position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: -1; background-color: #000; }

04. Richten Sie CSS-Parallaxenebenen ein

Jede der Bildebenen ist so eingestellt, dass sie eine absolute Positionierung mit einer Größe verwenden, die dem Browserfenster entspricht. Das Parallaxenbild in diesem Beispiel basiert auf einem Muster mit einer bestimmten Größe, das so eingestellt ist, dass es sich wiederholt. Sie können das Bild nur vertikal mit repeat-y oder horizontal mit repeat-x wiederholen.



[data-parallax] > *{ position: absolute; width: 100vw; height: 100vh; background-repeat: repeat; background-size: 20vw 20vw; }

05. Verwenden Sie CSS-Hintergrundebenen

Parallaxen-Maus-Site

Microsoft Surface Pro 6 gegen Surface Laptop 2
Renaud ist bestrebt, Entwicklungsarbeit aus der Werbung der Website zu finden, und verpasst keine Gelegenheit, seine WebGL-Fähigkeiten zu demonstrieren(Bildnachweis: Renaud Rohlinger)

Während jede der Bildebenen die in Schritt 4 definierten Positions- und Größeneinstellungen gemeinsam nutzt, verwendet jede Ebene ein eindeutiges Bild. Der n-te untergeordnete Selektor wird verwendet, um jedes einzelne Element innerhalb des Parallaxencontainers zu referenzieren. Das Hintergrundbildattribut wird verwendet, um zwei Linien zu zeichnen, die beim Kacheln einen Rastereffekt erzeugen. In niedrigeren Schichten werden dunklere Farben verwendet, um die Wahrnehmung der Tiefe zu verbessern.

[data-parallax] > *:nth-child(1){ background-image: linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px); } [data-parallax] > *:nth-child(2){ background-image: linear-gradient(to right, #777 1px, transparent 1px), linear-gradient(to bottom, #777 1px, transparent 1px); } [data-parallax] > *:nth-child(3){ background-image linear-gradient(to right, #fff, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px); }

06. Führen Sie die Initiierung der JavaScript-Ebene durch

Erstellen Sie eine neue Datei mit dem Namen code.js . Dieser Schritt findet den Parallaxencontainer und initiiert jede seiner Bildebenen mit dem Datenindex Attribut, das in Schritt 7 verwendet wird. Dies muss über eine Funktion ausgeführt werden, die an das Ladeereignis des Browserfensters angehängt ist, damit der Code nur ausgeführt wird, wenn der Inhalt der Seite fertig ist.

window.addEventListener('load', function(){ var container = document. querySelector('[data-parallax]'); var childNodes = container.children; for(var n=0; n

07. Berechnen Sie die Bewegung der JavaScript-Maus

Der Effekt beruht auf dem Verschieben der jeder Parallaxenebene zugeordneten Bilder als Reaktion auf die Mausbewegung. Der in Schritt 6 identifizierte Parallaxenbehälter hat a Mausbewegung Ereignis-Listener angehängt, der eine Funktion zum Neupositionieren von Hintergrundbildern der Parallaxenebenen bei jeder Mausbewegung auslöst. Jede Ebene verfügt über eine Bewegungsberechnung basierend auf der in Schritt 6 angewendeten Indexnummer.

container.addEventListener('mousemove', function(e){ var elms = this.children; for(var c=0; c

Dieser Artikel wurde ursprünglich im Creative Web Design Magazine veröffentlicht Webdesigner . Kaufen Sie jetzt die Ausgabe 290.

Zum Thema passende Artikel: