Hiding Text - Teil 2

Entdecken Sie die faszinierende Welt des Designs auf der neuen interaktiven Website! Tauchen Sie ein, erkunden Sie eine reiche Sammlung von Kunstwerken und entdecken Sie innovative Gestaltungstechniken. Mit dynamischem JavaScript bieten wir ein einzigartiges Erlebnis, das Ihre kreative Inspiration beflügelt.

EINLEITUNG

Den Onepager mit JavaScript erweitern

Im ersten Teil haben wir das Grundgerüst unseres Onepagers aufgebaut und mit HTML und CSS gestaltet. Navigation, Hintergrundvideo, Inhaltsbereiche und die verschiedenen Hover-Effekte sind damit bereits vorhanden.

Jetzt erweitern wir die Seite mit JavaScript. Dadurch können wir auf das Scrollen des Benutzers reagieren und Elemente abhängig von ihrer Position auf der Seite verändern.

In diesem zweiten Teil kümmern wir uns zunächst um zwei Funktionen: Unsere Navigation soll automatisch erkennen, in welchem Bereich des Onepagers wir uns gerade befinden. Anschließend ergänzen wir einen Parallax-Effekt, durch den sich die Hintergrundelemente beim Scrollen mit einer anderen Geschwindigkeit bewegen.

Dafür erstellen wir im Ordner assets eine neue Datei mit dem Namen scripts.js:

OnePager
├── index.html
└── assets
    ├── images
    ├── videos
    ├── styles.css
    └── scripts.js

Damit unser JavaScript ausgeführt werden kann, binden wir die neue Datei in unserer index.html ein. Die Einbindung setzen wir am Ende der Seite direkt vor das schließende </body>:

// index.html

...

<script src="assets/scripts.js"></script>

Durch diese Position wird zunächst der Inhalt unserer Seite geladen, bevor der Browser scripts.js ausführt. Die HTML-Elemente, mit denen wir im weiteren Verlauf arbeiten, stehen dem JavaScript damit bereits zur Verfügung.

NAVIGATION

Aktiven Menüpunkt beim Scrollen erkennen

Unsere Navigation verlinkt bereits auf die Bereiche About, Work und Contact. Jetzt möchten wir zusätzlich sichtbar machen, in welchem Abschnitt des Onepagers sich der Besucher gerade befindet.

Dafür beobachten wir die Scrollposition der Seite. Sobald sich ein bestimmter Bereich im aktuellen Scrollbereich befindet, erhält der dazugehörige Navigationslink automatisch die Klasse is-active. Verlässt der Besucher diesen Bereich wieder, wird die Klasse entfernt.

Die Verbindung zwischen Navigation und Seitenabschnitt haben wir bereits im ersten Teil über das Attribut data-scroll vorbereitet:

<a
  class="nav-link hidden-link"
  href="#About"
  data-scroll="About"
  data-hover="About"
><span>About</span></a>

data-scroll="About" verweist dabei auf unseren Seitenbereich mit id="About". Genau diese Zuordnung verwenden wir jetzt in JavaScript.

Füge folgenden Code in deine assets/scripts.js ein:

// assets/scripts.js

/* -------------------------------------------------------------------------- */
/*                                  scroll to                                 */
/* -------------------------------------------------------------------------- */

document.addEventListener("DOMContentLoaded", function () {
  var sectionIds = document.querySelectorAll("a.nav-link");

  function updateActiveNavigation() {
    var scrollPosition =
      window.pageYOffset || document.documentElement.scrollTop;

    sectionIds.forEach(function (link) {
      var containerId = link.getAttribute("data-scroll");

      if (!containerId) {
        return;
      }

      var container = document.getElementById(containerId);

      if (!container) {
        return;
      }

      var containerOffset = container.offsetTop - 134;
      var containerHeight = container.offsetHeight;
      var containerBottom = containerOffset + containerHeight;

      if (
        scrollPosition < containerBottom - 20 &&
        scrollPosition >= containerOffset - 45
      ) {
        link.classList.add("is-active");
      } else {
        link.classList.remove("is-active");
      }
    });
  }

  window.addEventListener("scroll", updateActiveNavigation);

  // Aktiven Menüpunkt bereits beim Laden bestimmen
  updateActiveNavigation();
});

Der äußere DOMContentLoaded-Listener stellt sicher, dass unser JavaScript erst mit den Elementen der Seite arbeitet, nachdem das HTML eingelesen wurde.

Mit

var sectionIds = document.querySelectorAll("a.nav-link");

sammeln wir zunächst alle Navigationslinks mit der Klasse .nav-link. Anschließend reagiert der scroll-Event-Listener auf jede Bewegung der Seite.

Für jeden Navigationslink lesen wir dessen data-scroll-Attribut aus:

var containerId = link.getAttribute("data-scroll");

Bei unserem Link zu About erhalten wir beispielsweise den Wert About. Anschließend prüfen wir zunächst, ob data-scroll tatsächlich vorhanden ist. Über document.getElementById() suchen wir danach den entsprechenden Seitenbereich.

if (!containerId) {
  return;
}

var container = document.getElementById(containerId);

if (!container) {
  return;
}

Nun werden Position und Höhe dieses Bereichs ermittelt. Aus containerOffset und containerHeight berechnen wir mit containerBottom dessen unteres Ende. Gleichzeitig enthält scrollPosition die aktuelle vertikale Scrollposition der Seite.

Anhand dieser Werte entscheidet die abschließende Abfrage, welcher Navigationspunkt gerade aktiv sein soll:

if (
  scrollPosition < containerBottom - 20 &&
  scrollPosition >= containerOffset - 45
) {
  link.classList.add("is-active");
} else {
  link.classList.remove("is-active");
}

Befindet sich die Scrollposition innerhalb des entsprechenden Bereichs, wird is-active hinzugefügt. Andernfalls wird die Klasse wieder entfernt.

Die Werte 134, 20 und 45 dienen dabei als Versatzwerte. Dadurch muss die Scrollposition nicht exakt mit Anfang und Ende des jeweiligen Bereichs übereinstimmen. Diese Werte können später angepasst werden, wenn der aktive Menüpunkt früher oder später wechseln soll.

Da wir .is-active bereits im ersten Teil in unserem CSS berücksichtigt haben, wird der aktive Navigationspunkt dadurch direkt hervorgehoben.

Abschließend rufen wir updateActiveNavigation() einmal direkt auf. Dadurch wird der passende Navigationspunkt bereits beim ersten Laden der Seite markiert und nicht erst, nachdem der Benutzer zum ersten Mal gescrollt hat.

21.mp4 14.2 MB

PARALLAX-EFFEKT

Hintergründe beim Scrollen bewegen

Nachdem unsere Navigation jetzt auf die aktuelle Scrollposition reagiert, erweitern wir den Onepager um einen Parallax-Effekt.

Bei einem Parallax-Effekt bewegen sich verschiedene Ebenen einer Webseite mit unterschiedlichen Geschwindigkeiten. Dadurch entsteht beim Scrollen der Eindruck von räumlicher Tiefe. In unserem Onepager verwenden wir diesen Effekt für das Hintergrundvideo und die Hintergrundbilder.

Die dafür benötigte HTML-Struktur haben wir bereits im ersten Teil vorbereitet. Unsere Hintergründe befinden sich innerhalb eines Elements mit der Klasse .bg-parallax. Das eigentliche Bild beziehungsweise Video besitzt die Klasse .parallax-img.

Jetzt ergänzen wir die dazugehörige JavaScript-Logik in unserer assets/scripts.js:

// assets/scripts.js

/* -------------------------------------------------------------------------- */
/*                                    parallax                                */
/* -------------------------------------------------------------------------- */

document.addEventListener("DOMContentLoaded", function () {
  var parallaxContainers = document.querySelectorAll(".bg-parallax");

  // Für jeden Parallaxencontainer eine Instanz erstellen
  parallaxContainers.forEach(function (container) {
    new Parallax(container);
  });
});

function Parallax(container) {
  this.container = container;
  this.img = container.querySelector(".parallax-img");
  this.overlay = container.querySelector(".parallax-overlay");

  if (!this.img || !this.overlay) {
    return;
  }

  // Ereignislistener hinzufügen
  window.addEventListener("scroll", this.scroll.bind(this));
  window.addEventListener("resize", this.scroll.bind(this));
  window.addEventListener("resize", this.resize.bind(this));

  // Parallax-Effekt und Overlay initial berechnen
  this.scroll();
  this.resize();
}

Parallax.prototype.scroll = function () {
  var rect = this.container.getBoundingClientRect();
  var scrollTop =
    window.pageYOffset || document.documentElement.scrollTop;
  var offset = rect.top + scrollTop;

  // Parallax-Effekt berechnen
  var parallaxOffset = (offset - scrollTop) * -0.4;

  this.img.style.transform =
    "translateY(" + parallaxOffset + "px)";
};

Parallax.prototype.resize = function () {
  var rect = this.container.getBoundingClientRect();

  this.overlay.style.height = rect.height + "px";
};

Zunächst warten wir wieder mit DOMContentLoaded, bis das HTML eingelesen wurde. Anschließend suchen wir sämtliche Elemente mit der Klasse .bg-parallax:

var parallaxContainers = document.querySelectorAll(".bg-parallax");

Da unser Onepager mehrere solcher Bereiche enthalten kann, gehen wir anschließend mit forEach() durch alle gefundenen Container. Für jeden davon erzeugen wir eine eigene Parallax-Instanz:

parallaxContainers.forEach(function (container) {
  new Parallax(container);
});

Die Funktion Parallax() speichert zunächst den jeweiligen Container und sucht darin nach dem eigentlichen Hintergrund sowie dem darüberliegenden Overlay:

this.container = container;
this.img = container.querySelector(".parallax-img");
this.overlay = container.querySelector(".parallax-overlay");

Damit kann jede Instanz unabhängig mit ihrem eigenen Bild oder Video und dem dazugehörigen Overlay arbeiten.

Anschließend prüfen wir, ob sowohl .parallax-img als auch .parallax-overlay im jeweiligen Container vorhanden sind:

if (!this.img || !this.overlay) {
  return;
}

Fehlt eines der benötigten Elemente, wird diese Parallax-Instanz nicht weiter initialisiert. Dadurch vermeiden wir JavaScript-Fehler, wenn die erwartete Struktur bei einem Container einmal nicht vollständig vorhanden sein sollte.

Anschließend registrieren wir Ereignisse für das Scrollen und für Größenänderungen des Browserfensters:

window.addEventListener("scroll", this.scroll.bind(this));
window.addEventListener("resize", this.scroll.bind(this));
window.addEventListener("resize", this.resize.bind(this));

Beim Scrollen wird scroll() ausgeführt. Ändert sich die Größe des Browserfensters, werden sowohl die Position des Hintergrunds als auch die Größe des Overlays neu berechnet.

Zum Schluss führen wir beide Berechnungen einmal unmittelbar aus:

this.scroll();
this.resize();

Dadurch befinden sich Hintergrund und Overlay bereits beim ersten Laden der Seite in der richtigen Position und Größe. Wir müssen nicht erst auf ein Scroll- oder Resize-Ereignis warten.

Die Bewegung berechnen

Die eigentliche Parallax-Bewegung entsteht in unserer scroll()-Methode:

var parallaxOffset = (offset - scrollTop) * -0.4;
this.img.style.transform = "translateY(" + parallaxOffset + "px)";

Über getBoundingClientRect() bestimmen wir zunächst die aktuelle Position des jeweiligen Containers. Zusammen mit der Scrollposition berechnen wir daraus einen Versatz für das Hintergrundelement.

Der Faktor -0.4 bestimmt dabei die Stärke und Richtung der Bewegung. Das Ergebnis wird anschließend über translateY() direkt als CSS-Transformation auf .parallax-img angewendet.

Dadurch bewegt sich der Hintergrund nicht exakt mit dem übrigen Seiteninhalt und der gewünschte räumliche Eindruck entsteht.

Das Overlay anpassen

Zusätzlich besitzt unsere Parallax-Funktion eine resize()-Methode:

Parallax.prototype.resize = function () {
  var rect = this.container.getBoundingClientRect();
  this.overlay.style.height = rect.height + "px";
};

Sie ermittelt die aktuelle Höhe des Parallax-Containers und überträgt diese auf .parallax-overlay. Dadurch bleibt das Overlay auch bei einer Änderung der Fenstergröße an den jeweiligen Hintergrundbereich angepasst.

22.mp4 28.5 MB

Meld dich an und schreibe ein Kommentar