Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Scrolling-Effekte sind ein beliebtes Gestaltungsmittel auf modernen Websites. Sinnvoll eingesetzt können Sie dazu beitragen, dass eine Website gleichermaßen erfolgreich als auch ästhetisch ansprechend ist. In diesem Beitrag findet ihr ein JavaScript-Snippet, mit dem Elemente eine CSS-Klasse erhalten, sobald Sie sich im Viewport befinden. Die Klasse kann optional wieder entfernt werden, sobald sich das Element nicht mehr vollständig im Viewport befindet.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Das JavaScript für den Scrolling-Effekt

Das folgende JavaScript fügt einem Element mit der CSS-Klasse .mein-element zusätzlich die Klasse .visible hinzu, wenn das Element vollständig im Viewport sichtbar ist. Die else-Bedingung innerhalb des JavaScripts kann entfernt werden, um die CSS-Klasse nur hinzuzufügen, aber nicht wieder zu entfernen.

Beispiel anschauen

<div class="mein-element"></div>
<div class="mein-element"></div>
 …
<div class="mein-element"></div>
function isElementInViewport(element) {
 var rect = element.getBoundingClientRect();
 return (
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
 rect.right <= (window.innerWidth || document.documentElement.clientWidth)
 );
}

var elements = document.querySelectorAll(".mein-element");
 
function callbackFunc() {
 for (var i = 0; i < elements.length; i++) {
  if (isElementInViewport(elements[i])) {
 elements[i].classList.add("visible");
}

 /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
  else { 
   elements[i].classList.remove("visible");
  }
 }
}
 
window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);
.mein-element {
  background:red;
  height:50vh;
  max-width: 500px;
  margin:0 auto;
  margin-bottom:2em;
}

.visible {
  background: lime;
}

Elemente beim Scrollen einfaden

Mit ein wenig CSS kann nun sehr einfach ein Fade-In-Effekt hergestellt werden

Beispiel anschauen

.mein-element {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}


.visible {
  opacity: 1;
}

Elemente abwechselnd von links und rechts einfahren lassen

Eine geringe Anpassung am CSS-Code lässt die Elemente abwechselnd von links und rechts einfahren und einfaden.

Beispiel anschauen

.mein-element {
  opacity: 0;
  transition: all .25s ease-in-out;
}

.mein-element:nth-of-type(odd) {
  transform: translateX(-90%);
}

.mein-element:nth-of-type(even) {
  transform: translateX(90%);
}

.mein-element.visible {
  transform:translateX(0);
  opacity: 1;
}

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 10 Kommentare

  1. Martin
    schrieb am 23.02.2020 um 12:05 Uhr:

    Hallo,
    der eventlistener „scroll“ soll den browser ziemlich fordern, sollte man das berücksichtigen, also gibt es alternativen?

    Antworten
  2. Müller Andreas
    schrieb am 27.11.2019 um 06:39 Uhr:

    Hallo kulturbanause team
    Schönes tool .läuft prima .
    wie kann ich es abändern, daß das nachladen etwas vor dem sichtfeld geschieht ??

    wäre um eine Antwort sehr dankbar

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 03.12.2019 um 13:07 Uhr:

      Hallo Andreas,
      ich beziehe mich auf das 1. Beispiel dieses Artikels. Schreib mal rect.bottom - 500 <= (window.innerHeight … , dann sollte das Element 500 Pixel früher die richtige Klasse erhalten und einblenden.

      Antworten
      • Joachim Schaupp
        schrieb am 13.11.2020 um 19:55 Uhr:

        Bei relativ kurzen Texten funktioniert das wunderbar, nur wenn der Text um ein vielfaches länger als das Browserfenster ist, funktioniert es leider überhaupt nicht mehr. Was muss man ändern, damit das Element auch eingeblendet wird wenn es nicht vollständig im Viewport sichtbar ist, da es einfach zu lang ist.

  3. Dominik Heer
    schrieb am 05.09.2018 um 12:36 Uhr:

    Hallo,
    ich suche genau nach dieser Funktion. Ich will Div-Container rein zoomen lassen oder einfaden.
    Ich habe alles so wie es hier steht in die entsprechenden Dateien kopiert und in der HTML Datei die CSS und Java Script Datei verlinkt. Ich bekomme die Rechtecke angezeigt aber es finden keine Animationen statt.
    Fehlt noch etwas?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 09.09.2018 um 19:40 Uhr:

      Eigentlich nicht. Wenn das Beispiel von uns im gleichen Browser funktioniert, kannst du Inkompatibilitäten ausschließen. Da es auch keine Abhängigkeiten zu Frameworks wie jQuery o.ä. gibt, muss sich in deinem Code irgendwo ein Fehler eingeschlichen haben.

      Antworten
  4. Thomas
    schrieb am 06.12.2016 um 21:00 Uhr:

    Möchte sowas hier umsetzen, die Veränderung im Header beim scrollen:

    http://www.redtherm.de/produkte/infrarotheizungen/informationen.html

    Geht das nur über Java? Oder lässt sich sowas auch mit CSS umsetzen, ohne Java?

    Antworten
    • Stefan
      schrieb am 02.03.2017 um 13:51 Uhr:

      Mit Java schonmal garnicht. Wenn dann wohl JavaSCRIPT

      Antworten
  5. Franz Meyer
    schrieb am 13.09.2016 um 16:09 Uhr:

    Schön, hier mal wieder einen neuen Artikel zu lesen und dann noch so einen interessanten! Vielen Dank

    Antworten
  6. Flo
    schrieb am 09.09.2016 um 10:07 Uhr:

    In Zukunft mit dem IntersectionObserver wird das noch interessanter: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →