Wann ist ein Element im Viewport
Es gibt eine relativ neue Möglichkeit auf einfache Art und Weise zu sehen, ob sich ein Element im Viewport (im sichtbaren Bereich) befindet oder nicht. Es ist sogenannte Vanilla Script also pures JavaScript und benötigt keine externe Bibliothek.
<script>
document.querySelectorAll('.meinElement').forEach((i) => {
if (i) {
const observer = new IntersectionObserver((entries) => {
observerCallback(entries, observer, i)
},
{threshold: 1}); // Wie viel des Elementes ist im sichtbaren Bereich
observer.observe(i);
}
})
const observerCallback = (entries) => {
entries.forEach((entry, i) => {
if (entry.isIntersecting) {
entry.target.classList.add('show'); // füge eine Klasse hinzu
}
else {
entry.target.classList.remove('show'); // entferne Klasse wenn ausserhalb sichtbaren Bereichs
}
});
};
</script>Jetzt kann man einfach im CSS eine dementsprechende Animation erzeugen in etwa so:
.meinElement{
opacity: 0.4;
transition: all 1s;
}
.meinElement.show{
opacity: 1;
}
Nun faden die Elemente beim hineinscrollen ein und beim rausscrollen wieder aus.