Erstellen Sie ein interaktives Parallaxe-Bild

Feb 3, 2026

wie man

Parallaxe Scrollen ist nicht mehr der garantierte Aufmerksamkeitsgrabber, der früher war, aber es gibt andere Möglichkeiten, Parallaxe-Techniken zu verwenden, um Ihre Besucher zu engagieren und Ihre zu verbessern Benutzererfahrung .

Ansehen Herr Fisk's Site , entworfen von BMO. , und Sie werden eine andere Art von Parallaxen bemerken, die eingeschaltet ist: Das hellfarbene Hauptbild bewegt sich in 3D als Reaktion auf Ihre Mausbewegungen.

5 Tipps für superschnelle CSS

Es ist ein beeindruckender Effekt, der nicht zu schwer zu implementieren ist; Befolgen Sie einfach diesen Schritten, um Ihrer Website ein auffälliges Gefühl der Tiefe zu geben.

Erstellen Sie Ihre eigene auffällige Site mit dem perfekten Web-Hosting Service und Webseitenersteller Werkzeug. Speichern Sie auf dem Weg Ihre Entwurfsdateien in den besten Cloud-Speicherung. .

01. Initiieren Sie HTML.

Der erste Schritt besteht darin, das HTML-Dokument zu definieren, das aus dem HTML-Behälter zum Speichern der Kopf- und Körperabschnitte besteht. Während der Kopfabschnitt hauptsächlich für das Laden der externen CSS- und JavaScript-Ressourcen verantwortlich ist, speichert der Body-Abschnitt die in Schritt 02 zu erstellenden Inhaltselemente.

 & lt ;! doctype html & gt;
& lt; HTML & GT;
& lt; head & gt;
& lt; Titel & GT; Maus-Scroll & lt; / title & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; Skript src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
*** Schritt 2 hier
& lt; / body & gt;
& lt; / html & gt;

02. Inhaltselemente.

Die Technik ermöglicht jedem Inhaltscontainer mit dem Data-Parallax-Attribut, um den Effekt anzuzeigen. Jedes untergeordnete Element der ersten Ebene wird mit der Parallaxe-Präsentation angezeigt. Dieses Beispiel setzt drei Kinderschichten für die Parallaxe, aber Sie können jedoch mehr hinzufügen, wenn Sie möchten. Sie können diesen Schichten auch Inhalte wie Text oder Bilder hinzufügen. PNG oder SVG mit Transparenz wird am besten funktionieren.

 & lt; Artikeldaten-parallaxe & gt;
  & div & gt; & lt; / div & gt;
  & div & gt; & lt; / div & gt;
  & div & gt; & lt; / div & gt;
& lt; / article & gt;

03. Parallaxe Containerstil

Erstellen Sie eine neue Datei mit dem Namen 'styles.css'. Der erste Satz von Regeln in dieser Datei legt die Standardgröße des Parallaxe-Containers und des Positionsmodus fest. Es ist wichtig, relative Positionierung zu verwenden, so dass die untergeordneten Elemente in Bezug auf den Ort des Containers angeordnet werden können. Die Breite und Höhe werden auf den vollständigen Bildschirm eingestellt, um maximale Interaktivität zu ermöglichen.

 [Data-Parallaxe] {
  Position: relativ;
  Breite: 100VW;
  Höhe: 100VH;
}

04. Parallaxe Kinder.

Jedes der ersten Ebenenelemente im Inneren des Datenparallax-Behälters ist so dimensioniert und positioniert, um zentral zu erscheinen. Zusammen mit der relativen Position der Eltern wird der Prozentsatz als Messeinheit verwendet, sodass die Dimensionierung und Positionierung in Bezug auf den Parallaxenbehälter platziert werden kann. Für dieses Beispiel wird ein transparenter roter Hintergrund verwendet, um den Effekt zu demonstrieren. Sie können dies mit dem PNG- oder SVG-Bild Ihrer Wahl unter Verwendung von @Background ersetzen: URL ("Ihr Bild hier").

 [Data-Parallaxe] & gt; * {{
  Position: absolut;
  Breite: 50%;
  Höhe: 50%;
  links: 25%;
  oben: 25%;
  Grenze: 1px fest # 000;
  Hintergrund: RGBA (255,0,0 ,,25)
}

05. Initiieren Sie das JavaScript

Erstellen Sie eine neue Datei mit dem Namen 'code.js'. JavaScript wird verwendet, um die Antworten auf die Mausinteraktionen des Benutzers zu steuern. Wir möchten nicht, dass das JavaScript einen der JavaScript-Code ausführt, bis die Seite vollständig geladen ist, somit der Code für die Schritte 06 und 07, um eine Funktion zu platzieren, die durch das Ladeereignis ausgelöst wird, das aktiviert, wenn das Fenster ausgefüllt ist.

 Window.ADDEVENTLISTENER ("LOAD", Funktion () {
  *** Schritt 6 hier
});

06. Knoten Suche.

Die erste Aktivität von JavaScript, die sofort nach der Seite ausgeführt werden soll, ist die Suche nach allen Parallaxenschichten. Erstens werden die Parallaxe-Behälter gefunden, gefolgt von ihren Kindern. Jedes Kind verfügt über eine Indexnummer, die sie unter dem Attribut 'Data Index' an sie angewendet wird.

 AR-Knoten = document.queryselectorall ("[Daten parallax]");
für (var i = 0; i & lt; knoten.länge; i ++) {
  var kinder = knoten [i] .children;
  für (var n = 0; n & lt; kinder.länge; n ++) {
  Kinder [n] .setattribute ("Data-Index", N + 2);
  }
  *** Schritt 7 hier
}

07. Parallax-Zuhörer

Der letzte Schritt besteht darin, einen Ereignislistener für jede Mausbewegung anzuwenden, die über den Parallaxenbehälter auftritt. Alle solchen Aktionen löst ein Merkmal aus, um die neuen Positionen der Parallaxenschichten basierend auf der Mausposition und dem in Schritt 06 definierten Datenindexattribut zu berechnen, was zu jeder Schicht, die in verschiedenen Schritten aktualisiert wird. Das Ergebnis jeder Berechnung wird über das Stilattribut auf die Ebenen angewendet.

 Knoten [i] .addeventListener ("MouseMove", Funktion (E) {
  var elms = this.children;
  für (var c = 0; c & lt; els.länge; c ++) {
  VAR Divisor = Parseint (ELMS [C] .getattribute ("Data-Index"));
  var startx = this.offsetwidth / 4;
  var gestartet = dies.offsheichtht / 8;
  elms [c] .style.left = startx - (((e.screenx / divisor) -e.clientx) / 3) + "px";
  elms [c] .style.top = Starty - ((((E.Screeny / Divisor) -E.Clienty) / 3) + "px";
  }
});

Dieser Artikel wurde ursprünglich in Ausgabe 272 des kreativen Webdesign-Magazins veröffentlicht Webdesigner . AUSGABEN 272 HIER KAUFEN oder Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

Animieren Sie SVG mit Javascript
Erstellen Sie flüssige Effekte mit WebGL
10 Möglichkeiten, um mit Cross-Browser-Kompatibilitätsprobleme zu vermeiden

Erstellen Sie ein interaktives Parallaxe-Bild

01. Initiieren Sie HTML.

02. Inhaltselemente.

03. Parallaxe Containerstil

04. Parallaxe Kinder.

05. Initiieren Sie das JavaScript

06. Knoten Suche.

07. Parallax-Zuhörer

wie man - Die beliebtesten Artikel

Abbildung Zeichnung: Ein Anfängerhandbuch

Wie man eine fehlerhafte Zusammensetzung korrigiert

Erstellen Sie ein Fliesenmaterial in Substanzdesigner

Verwendung von Adobe Capture CC

Erstellen Sie ein Zeichen mit einer starken Pose in Photoshop

So simulieren Sie Explosionen in Maya

Erstellen einer Meteor-Dusche in 3ds max

Lernen Sie, Design- und Inhalt Sprints zu führen

Kategorien