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.

Erweitern der Webseite mit JavaScript

Heute erweitern wir die Webseite Hiding Text Teil1, mit Hilfe von JavaScript. Fangen wir an, als erstes erstellen wir eine Datei namens scrips.js in dem Ordner assets und binden die script Dateien in unsere Html ein:

// index.html

...

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

Einzelne Menüpunkte erkennen (scroll to)

Wir beginnen mit der Navigation, erreichen wollen wir, dass die einzelnen Menüpunkte zu erkennen sind wenn wir in der entsprechenden section sind. Das heisst wir erstellen eine classe is-active, für die Aktive classe.

// assets/scripts.js

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

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

  window.addEventListener("scroll", function (event) {
    event.preventDefault();
    sectionIds.forEach(function (link) {
      var containerId = link.getAttribute("data-scroll");
      if (containerId !== undefined) {
        var container = document.getElementById(containerId);
        if (container) {
          var containerOffset = container.offsetTop - 134;
          var containerHeight = container.offsetHeight;
          var containerBottom = containerOffset + containerHeight;
          var scrollPosition =
            window.pageYOffset || document.documentElement.scrollTop;
        }
      }
      if (
        scrollPosition < containerBottom - 20 &&
        scrollPosition >= containerOffset - 45
      ) {
        link.classList.add("is-active");
      } else {
        link.classList.remove("is-active");
      }
    });
  });
});

Dieser Code ermöglicht eine sogenannte "scrollspy"-Funktionalität, bei der die Navigationselemente je nachdem, welcher Abschnitt auf der Seite sichtbar ist, automatisch aktiviert werden.

DOMContentLoaded Event Listener: Wenn der DOM (Document Object Model) vollständig geladen ist, wird eine Funktion ausgeführt. Dies stellt sicher, dass der Code erst ausgeführt wird, wenn die gesamte Seite geladen ist.
Auswahl der Navigationslinks: Alle Navigationslinks mit der Klasse "nav-link" werden ausgewählt und in der Variable sectionIds gespeichert. Diese Links dienen dazu, den Benutzer beim Klicken zu verschiedenen Abschnitten der Seite zu führen.
Scroll Event Listener: Ein Ereignislistener wird hinzugefügt, um auf das Scrollen der Seite zu reagieren. Jedes Mal, wenn der Benutzer die Seite scrollt, wird die darin enthaltene Funktion ausgeführt.
Überprüfung der Abschnitte: Die Funktion überprüft, ob ein bestimmter Abschnitt der Seite sichtbar ist, indem sie seine Position im Verhältnis zum aktuellen Scrollen des Benutzers analysiert.
Hinzufügen/Entfernen der "is-active" Klasse: Wenn ein Abschnitt sichtbar ist, wird dem entsprechenden Navigationslink die Klasse "is-active" hinzugefügt, um ihn zu markieren. Andernfalls wird diese Klasse entfernt.
Berechnung der Positionen: Die Position des Abschnitts auf der Seite, seine Höhe und die aktuelle Scrollposition des Benutzers werden berechnet, um zu bestimmen, ob der Abschnitt im sichtbaren Bereich liegt.
Aktualisierung der Navigationslinks: Die Entscheidung, ob ein Navigationslink aktiviert werden soll oder nicht, wird basierend auf der Scrollposition und der Position des Abschnitts getroffen. Wenn der Abschnitt sichtbar ist, wird der entsprechende Navigationslink als aktiv markiert.

21.mp4 14.2 MB

Parallax-Effekt

Als nächstes wollen wir einen parallax effect. Parallax-Effekte sind eine faszinierende Möglichkeit, Bewegung und Tiefe in Webdesigns zu integrieren. Diese Technik erzeugt den Eindruck von unterschiedlichen Geschwindigkeiten, indem sich Hintergrund- und Vordergrundelemente beim Scrollen der Seite unabhängig voneinander bewegen. Durch Parallax-Effekte können Websites ein immersiveres Erlebnis bieten und den visuellen Reiz für die Besucher erhöhen.

// assets/scripts.js

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

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

  // Für jeden Parallaxencontainer eine Instanz der Parallaxenklasse 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");

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

  // Aktualisiere den Parallaxeneffekt
  this.scroll();
}

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

  // Parallaxeneffekt 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";
};

Eventlistener hinzufügen: Der DOMContentLoaded-Eventlistener wartet darauf, dass der DOM vollständig geladen ist, bevor er die Parallaxen-Effekte initialisiert.
Parallaxencontainer auswählen: Der Code wählt alle Elemente auf der Seite aus, die die Klasse .bg-parallax haben, was darauf hindeutet, dass sie als Parallaxencontainer dienen sollen.
Parallax-Klasse definieren: Es wird eine JavaScript-Klasse Parallax definiert, die für jeden Parallaxencontainer eine Instanz erstellt.
Ereignislistener hinzufügen: Es werden Ereignislistener für das Scrollen und das Ändern der Fenstergröße hinzugefügt. Wenn das Fenster gescrollt oder die Größe geändert wird, werden die Methoden scroll und resize ausgeführt.
Parallaxeneffekt berechnen: In der Methode scroll wird der Parallaxeneffekt berechnet, indem die Position des Containers im Fenster und der Scrollwert berücksichtigt werden. Der Parallaxeneffekt wird durch die Verschiebung des Hintergrundbildes um einen Bruchteil der Scrollbewegung erzeugt.
Overlay-Höhe aktualisieren: Die Methode resize wird aufgerufen, um die Höhe des Overlays anzupassen, wenn sich die Fenstergröße ändert. Das Overlay ist ein zusätzliches Element über dem Hintergrundbild und wird auf die gleiche Höhe wie das Hintergrundbild festgelegt, um eine konsistente Darstellung sicherzustellen.

22.mp4 28.5 MB

Meld dich an und schreibe ein Kommentar