30. August 2023

Divs beim scrollen einblenden

Divs erst beim scrollen zeitverzögert einzublenden oder „reinfliegen“ zu lassen ist ein großer Trend in den letzten Jahren gewesen. Wenn man es nicht übertreibt und subtile Animationen, kann das durchaus ein netter Effekt sein. Wobei ich grundsätzlich eher Fan davon bin wenn eine Website schnell und direkt ist und die Darstellung der Inhalte nicht noch künstlich verzögert wird.

Mit folgendem JavaScript lässt sich prüfen ob ein div mit der Klasse „scrolldetected“ gerade im Viewport ist, also auf dem Bildschirm zu sehen ist, oder nicht. Allen divs, die im Viewport sind, wird die Klasse „active“ zugewiesen.

var winHeight = $(window).height();
var offset = 50;

$(window).bind('resizeEnd', function() {
    winHeight = $(window).height();
});

$(window).on('scroll', function() {
    var trigger = $(window).scrollTop() + winHeight - offset;
    $('.scrolldetected:not(.active)').each(function() {
    var elementOffset = $(this).offset().top;
    if( elementOffset < trigger ) {
        $(this).addClass('active');
    }
    });

});

Was jetzt mit den divs passiert ist Aufgabe des CSS. Zum Beispiel folgende Animation.

.scrolldetected{
    opacity: 0;
    transform: translateY(100px);
    transition: 1s;
}

.scrolldetected.active{ 
    opacity: 1;
    transform: translateY(0);
}