Module «lazyblock». Появление блоков при скролле снизу вверх из прозрачности.

Демо:

Плагины:

Подключение:

//

Разметка:

//

Стили:

//

.lazyblock {
    transition: transform ease-out 0.8s, opacity ease-out 0.8s;
    transform: translateY(100px);
    opacity: 0;

    &[data-delay="200"] {
        transition-delay: 200ms;
    }

    &.animated {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 999.98px) {
    .lazyblock {
        &[data-delay="200"] {
            transition-delay: 0;
        }
    }
}

Инициализация:

//

const { throttle } = require("throttle-debounce");

const lazyblocks = new Set();

const findLazyOnce = (function () {
    let executed = false;
    return function () {
        if (!executed) {
            executed = true;

            $(".lazyblock").each(function () {
                lazyblocks.add(this);
            });
        }
    };
})();

function animateLazy() {
    findLazyOnce();

    if (lazyblocks.size === 0) return;

    const scrollTop = $(window).scrollTop();
    const scrollBottom = scrollTop + $(window).height();

    lazyblocks.forEach(function (item) {
        const offsetTop = $(item).offset().top;
        const offsetTranslate = 0;
        const isInViewport = scrollBottom > offsetTop - offsetTranslate;

        if (isInViewport) {
            setTimeout(function () {
                $(item).addClass("animated");
            }, 0);
            lazyblocks.delete(item);
        }
    });
}

$(window).on("scroll load", throttle(100, animateLazy));