Wie man HTML Elemente einblendet wenn sie sich im Browserfenster befinden

Hier eine kleine Anleitung wie man HTML Elemente erst dann sichtbar macht, wenn eine bestimmte Stelle beim Scrollen erreicht ist.

Die Infos hierfür wurden von – https://developer.mozilla.org/de/docs/Web/API/Element/getBoundingClientRect und https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener bezogen und Dank – https://blog.kulturbanause.de/2016/09/scrolling-effekte-css-klasse-viewport/ funktionstüchtig gemacht.

Beginnen wir mit dem JavaScript und erstellen eine Funktion:

// JS

function WennElementInViewport(element) {

}

Hier definieren wir eine Variable mit der Methode getBoundingClientRect und ermitteln damit die Koordinaten des Objektes in Echtzeit. Weitere verständliche Informationen hierzu finden Sie auf https://www.mediaevent.de/javascript/dimension.html

// JS

function WennElementInViewport(element) {
  var messen = element.getBoundingClientRect();
  return (
    messen.top >= 0 &&
    messen.left >= 0 &&
    messen.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    messen.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

Nun wird eine CSS Klasse definiert und anschließend via Javascript selektiert und als Variable gespeichert.

/* CSS */

.versteckt {
  visibility: hidden;
}
// JS

var elements = document.querySelectorAll(".versteckt");

Anschließend erstellen wir eine Call Back Funktion welche eine Schleife beinhaltet zum selektieren der einzelnen HTML Elemente, welcher die CSS Klasse “versteckt” zugewiesen wurden. Darüber hinaus wird eine CSS Klasse definiert welche das jeweilige Element wieder sichtbar macht. Diese Klasse wird durch eine if Abfrage innerhalb der Schleife zugewiesen.

/* CSS */

.versteckt {
  visibility: hidden;
}
.sichtbar {
  visibility: visible;
}
// JS

function callbackFunc() {
  for (var i = 0; i < elements.length; i++) {
    if (WennElementInViewport(elements[i])) {
      elements[i].classList.add("sichtbar");
    }
  }
}

Als letztes fügen wir noch einen Event Listener hinzu.

// JS

window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);

Aus Jux und Tollerei erstellen wir gleich noch einige weitere Klassen mit einer Animation um die Auswirkungen sichtbar zu machen. Der gesamte Javascript und CSS Code sollte nun folgender Maßen aussehen.

/* CSS */

.versteckt {
  visibility: hidden;
}
.sichtbar {
  visibility: visible;
}
.blaueBox {
  background-color: blue;
  height: 300px;
  width: 300px;
  margin: auto;
}
.grueneBox {
  background-color: green;
  height: 300px;
  width: 300px;
  margin: auto;
}
.sichtbar.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes lightSpeedIn {
  0% {
  -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
  transform: translate3d(100%, 0, 0) skewX(-30deg);
  opacity: 0;
  }
  60% {
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  opacity: 1;
  }
  80% {
  -webkit-transform: skewX(-5deg);
  transform: skewX(-5deg);
  opacity: 1;
  }
  100% {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  }
  @keyframes lightSpeedIn {
  0% {
  -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
  transform: translate3d(100%, 0, 0) skewX(-30deg);
  opacity: 0;
  }
  60% {
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  opacity: 1;
  }
  80% {
  -webkit-transform: skewX(-5deg);
  transform: skewX(-5deg);
  opacity: 1;
  }
  100% {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  }
// JS

function WennElementInViewport(element) {
  var messen = element.getBoundingClientRect(); // Misst die Größe eines Elementes und dessen relative Position zum Viewport -> https://developer.mozilla.org/de/docs/Web/API/Element/getBoundingClientRect
  return (
    messen.top >= 0 &&
    messen.left >= 0 &&
    messen.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    messen.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}


var elements = document.querySelectorAll(".versteckt"); // Selektiert alle Elemente der CSS-Klasse: versteckt

function callbackFunc() {
  for (var i = 0; i < elements.length; i++) {
    if (WennElementInViewport(elements[i])) { // erstes, zweites, drittes Element etc der CSS Klasse: versteckt
      elements[i].classList.add("sichtbar"); // Fügt dem Element der CSS-Klasse: versteckt die CSS-Klasse: sichtbar hinzu
    }
  }
}


window.addEventListener("load", callbackFunc); // Der Event-Listener -> https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener
window.addEventListener("scroll", callbackFunc);

Und hier noch als vollständiges HTML Dokument um sich das Ergebnis ansehen zu können.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
        .versteckt {
            visibility: hidden;
        }
        
        .sichtbar {
            visibility: visible;
        }
        
        .blaueBox {
            background-color: blue;
            height: 300px;
            width: 300px;
            margin: auto;
        }
        
        .grueneBox {
            background-color: green;
            height: 300px;
            width: 300px;
            margin: auto;
        }
        
        .sichtbar.lightSpeedIn {
            -webkit-animation-name: lightSpeedIn;
            animation-name: lightSpeedIn;
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        
        @-webkit-keyframes lightSpeedIn {
            0% {
                -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
                transform: translate3d(100%, 0, 0) skewX(-30deg);
                opacity: 0;
            }
            60% {
                -webkit-transform: skewX(20deg);
                transform: skewX(20deg);
                opacity: 1;
            }
            80% {
                -webkit-transform: skewX(-5deg);
                transform: skewX(-5deg);
                opacity: 1;
            }
            100% {
                -webkit-transform: none;
                transform: none;
                opacity: 1;
            }
        }
        
        @keyframes lightSpeedIn {
            0% {
                -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
                transform: translate3d(100%, 0, 0) skewX(-30deg);
                opacity: 0;
            }
            60% {
                -webkit-transform: skewX(20deg);
                transform: skewX(20deg);
                opacity: 1;
            }
            80% {
                -webkit-transform: skewX(-5deg);
                transform: skewX(-5deg);
                opacity: 1;
            }
            100% {
                -webkit-transform: none;
                transform: none;
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div class="blaueBox"></div>
    <div class="grueneBox versteckt lightSpeedIn"></div>
    <div class="blaueBox"></div>
    <div class="grueneBox versteckt lightSpeedIn"></div>
    <div class="blaueBox"></div>
    <div class="grueneBox versteckt lightSpeedIn"></div>
    <div class="blaueBox"></div>
    <div class="grueneBox versteckt lightSpeedIn"></div>
    <div class="blaueBox"></div>
    <div class="grueneBox versteckt lightSpeedIn"></div>
    <div class="blaueBox"></div>
    <div class="grueneBox versteckt lightSpeedIn"></div>
    <div class="blaueBox"></div>
    <div class="grueneBox versteckt lightSpeedIn"></div>
    <div class="blaueBox"></div>
    <div class="grueneBox versteckt lightSpeedIn"></div>
    <div class="blaueBox"></div>
    <div class="grueneBox versteckt lightSpeedIn"></div>
    <div class="blaueBox"></div>
    <div class="grueneBox versteckt lightSpeedIn"></div>
</body>
<script>
    function WennElementInViewport(element) {
        var messen = element.getBoundingClientRect(); // Misst die Größe eines Elementes und dessen relative Position zum Viewport -> https://developer.mozilla.org/de/docs/Web/API/Element/getBoundingClientRect
        return (
            messen.top >= 0 &&
            messen.left >= 0 &&
            messen.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            messen.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

    var elements = document.querySelectorAll(".versteckt"); // Selektiert alle Elemente der CSS-Klasse: versteckt

    function callbackFunc() {
        for (var i = 0; i < elements.length; i++) {
            if (WennElementInViewport(elements[i])) { // erstes, zweites, drittes Element etc der CSS Klasse: versteckt
                elements[i].classList.add("sichtbar"); // Fügt dem Element der CSS-Klasse: versteckt die CSS-Klasse: sichtbar hinzu
            }
        }
    }

    window.addEventListener("load", callbackFunc); // Der Event-Listener -> https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener
    window.addEventListener("scroll", callbackFunc);
</script>

</html>

Schreibe einen Kommentar

Kontakt

Zögern Sie nicht Ihre Anfrage oder Vorschläge zu senden!

Informiert bleiben?

Melden Sie sich für den Newsletter an!

Nichts gefunden?

Schreiben Sie mir was Sie benötigen!

Datenschutz
WebShape.at, Besitzer: Matthias Hack (Firmensitz: Österreich), würde gerne mit externen Diensten personenbezogene Daten verarbeiten. Dies ist für die Nutzung der Website nicht notwendig, ermöglicht aber eine noch engere Interaktion mit Ihnen. Falls gewünscht, treffen Sie bitte eine Auswahl:
Datenschutz
WebShape.at, Besitzer: Matthias Hack (Firmensitz: Österreich), würde gerne mit externen Diensten personenbezogene Daten verarbeiten. Dies ist für die Nutzung der Website nicht notwendig, ermöglicht aber eine noch engere Interaktion mit Ihnen. Falls gewünscht, treffen Sie bitte eine Auswahl: