Erstellen Sie einen mausgesteuerten Parallaxen-Hintergrund-Effekt

Sep 12, 2025

wie man

(Bildkredite: Renaud Rohlinger)

Websites mit Parallax-Scrollen sind aus einem bestimmten Grund weiterhin beliebt: Sie schaffen ein angenehmes und engagierendes Browsing-Erlebnis für den Benutzer. Wir haben uns schon die beste atemberaubende angesehen Parallaxe Scrollen Websites, um Sie zu inspirieren, aber was machen Sie, wenn Sie einen Ihrer eigenen machen möchten?

Glücklicherweise ist der französische Creative Developer Renaud Rohlinger hier, um Ihnen die Seile zu zeigen, wie man einen Parallax-Scroll-Hintergrund erstellt, den Sie mit der Maus steuern können. Schauen Sie sich die erstaunlichen Ergebnisse an Seine Seite. und lernen Sie dann von Rohlinger selbst unten, wie Sie den Effekt in Ihrem nächsten Projekt replizieren können.

Sie könnten auch eine davon versuchen Website-Builders. , und während Sie Ihre Site-Leistung in Betracht ziehen, überprüfen Sie Ihre Web-Hosting Der Service arbeitet für Sie. Bekam eine media schwere Seite? Sichern Sie sich mit zuverlässigem Cloud-Speicherung. .

01. Definieren Sie den HTML-Dokumentrahmen

Der erste Schritt besteht darin, den Rahmen des HTML-Dokuments zu definieren. Dies besteht aus dem HTML-Container, der das Dokument als Abschnitte für Kopf und Körper beschreibt. Während der Kopfabschnitt die externen JavaScript- und CSS-Dateien verknüpft, wird der Körperabschnitt verwendet, um die Seiteninhaltselemente in Schritt 2 zu definieren.

 & lt ;! doctype html & gt;
& lt; HTML & GT;
& lt; head & gt;
& lt; Titel & GT; Parallaxe-Hintergrund & 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. Identifizieren Sie den HTML-Inhalt

Der Körperinhalt besteht aus Anzeigetext und einem DIV-Container mit der Datenparallaxe. Attribut. Es ist dieses Containerelement, das für den Parallaxenhintergrund verwendet wird, wobei jedes seiner untergeordneten Elemente mit den erforderlichen Hintergrundbildern gestaltet ist. In diesem Beispiel hat der Container drei Bildschichten, die von den Elementen der Kinder-DIV-Elemente erstellt werden.

 & lt; H1 & GT; Hallo! & Lt; / h1 & gt;
& lt; div Data-parallaxe & gt;
   & div & gt; & lt; / div & gt;
   & div & gt; & lt; / div & gt;
   & div & gt; & lt; / div & gt;
& lt; / div & gt;

03. Erstellen Sie einen CSS-Parallaxen-Container

Erstellen Sie eine neue Datei angerufen styles.css. . Der erste Schritt in dieser Datei setzt die Standard-Inhaltsfarbe, um weiß zu sein, und die Einstellungen für den Parallax-Hintergrundcontainer. Die feste Positionierung wird auf den Parallaxenbehälter angewendet, damit er in derselben Position bleiben kann, da Inhalt darüber blättert. Eine Standardfarbe wird als Seitenfarbe angewendet, während ein negativer Z-Index dem Container unter dem Seiteninhalt erscheint.

 HTML, Körper {
   Farbe: #FFF;
}
[Data-Parallaxe] {
   Position: Fixiert;
   Breite: 100VW;
   Höhe: 100VH;
   oben: 0;
   links: 0;
   Z-Index: -1;
   Hintergrundfarbe: # 000;
}

04. Setzen Sie CSS Parallaxe-Layer ein

Jede der Bildschichten wird eingestellt, um die absolute Positionierung mit einer Größe, um das Browserfenster anzupassen. Das Parallaxe-Image in diesem Beispiel basiert auf einem spezifischen Größe, das auf Wiederholung eingestellt ist. Sie können das Bild nur senkrecht mithilfe von Repect-Y oder horizontal mithilfe von Repect-X wiederholen.

 [Data-Parallaxe] & gt; * {{
   Position: absolut;
   Breite: 100VW;
   Höhe: 100VH;
   Hintergrund-Wiederholung: Wiederholen;
   Hintergrundgröße: 20VW 20VW;
}

05. Verwenden Sie CSS-Hintergrundebenen

Während jede der Bildschichten die in Schritt 4 definierten Positions- und Größeneinstellungen teilen, verwendet jede Ebene ein eindeutiges Bild. Der NTH-KIND-Selektor wird verwendet, um jedes einzelne Element innerhalb des Parallaxenbehälters zu verweisen. Das Hintergrund-Image-Attribut wird verwendet, um zwei Zeilen zu zeichnen, die beim Ziegeln einen Gittereffekt erzeugt. Untere Schichten verwenden dunklere Farben, um eine Wahrnehmung der Tiefe bereitzustellen.

 [Data-Parallaxe] & gt; *: NTH-Kind (1) {
   Hintergrundbild:
      Lineargradient (rechts, # 333 1px,
  transparent 1 px),
      Lineargradient (nach unten, # 333 1px,
  transparent 1 px);
}
[Data-Parallaxe] & gt; *: NTH-Kind (2) {
   Hintergrundbild:
      Lineargradient (nach rechts, # 777 1px,
transparent 1 px),
      Lineargradient (nach unten, # 777 1px,
transparent 1 px);
}
[Data-Parallaxe] & gt; *: NTH-Kind (3) {
   Hintergrundbild
      Lineargradient (nach rechts, #fff,
transparent 1 px),
      Lineargradient (nach unten, #fff 1px,
 transparent 1 px);
}

06. Führen Sie JavaScript-Layer-Initiation durch

Erstellen Sie eine neue Datei angerufen code.js. . Dieser Schritt findet den Parallax-Container und initiiert jede seiner Bildschichten mit der Datenindex. Attribut, das in Schritt 7 verwendet wird

 Window.AdDeventListener ("Load", Funktion () {
   VAR-Container = Dokument.
QuerySelector ("[Data-Parallaxe]");
   VAR-Childnodes = Container.Kinder;
   für (var n = 0; n & lt; childnodes.length; n ++) {
      Childnodes [n] .setattribute ("Datenindex", n + 1);
   }
   **** Schritt 7 hier
});

07. Berechnen Sie JavaScript Mausbewegungen

Der Effekt beruht darauf, die mit jeder Parallaxenschicht zugeordneten Bilder als Reaktion auf die Mausbewegung zu verschieben. Der in Schritt 6 identifizierte Parallaxcontainer hat eine Mouseemove. Ereignislistener angehängt, der eine Funktion auslöst, um Hintergrundbilder der Parallaxe-Ebenen zu positionieren, wenn die Mausbewegung vorliegt. Jede Schicht hat eine Bewegungsberechnung basierend auf der in Schritt 6 angewendeten Indexnummer.

 Container.AdDeventListener ("MouseMove",
 Funktion (e) {
   var elms = this.children;
   für (var c = 0; c & lt; els.länge; c ++) {
      VAR Motion = ParSEt (ELMS [C].
getattribute ("Data-Index") / 10;
      var x = ((e.clientx) * Bewegung) + "px";
      var y = ((e.clienty) * Bewegung) + "px"; elms [c] .style.backgroundPosition = x +
"" + y;
   }
});

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

Zum Thema passende Artikel:

10 Beste CSS-Frameworks 2019
So fügen Sie SVG mit CSS-Animation hinzu
52 Webdesign-Tools, mit denen Sie 2019 intelligenter arbeiten können

Erstellen Sie einen mausgesteuerten Parallaxen-Hintergrund-Effekt

01. Definieren Sie den HTML-Dokumentrahmen

02. Identifizieren Sie den HTML-Inhalt

03. Erstellen Sie einen CSS-Parallaxen-Container

04. Setzen Sie CSS Parallaxe-Layer ein

05. Verwenden Sie CSS-Hintergrundebenen

06. Führen Sie JavaScript-Layer-Initiation durch

07. Berechnen Sie JavaScript Mausbewegungen

wie man - Die beliebtesten Artikel

Ist Ihr Apple iCloud-Speicher voll? So können Sie den Raum freimachen

So erstellen Sie eine Fotocollage in Photoshop CC

Porträtfotografie: So nehmen Sie perfekte Portraits

Animieren mit der MO.JS-Bibliothek

Fügen Sie digitale Farben an Bleistiftzeichnungen hinzu

Streubäume mit V-Ray

Erstellen Sie Porträtkunst in Corel Maler

Alter ein Foto in Photoshop CC

Kategorien