Плавное появление элементов страницы при скролле

// Smooth appearance of sections
function smoothApp( section, elemArr, styleArr, transArr, timeoutArr, num ) {
    if (document.querySelector(section) && window.innerWidth >= 992) {
        var windowPos = Math.abs(Math.round(document.querySelector('html').getBoundingClientRect().top));
        var startPos = document.querySelector(section).getBoundingClientRect().top + window.pageYOffset - (window.innerHeight * num);
        elemArr.forEach(function(el, index){
            if (document.querySelector(el)) {
                if (document.querySelector(el) && windowPos < startPos) {
                    document.querySelector(el).style.transform = 'translate(' + styleArr[index] + ')';
                    document.querySelector(el).style.opacity = '0';
                    document.querySelector(el).style.transition = 'none';
                }
            }
        });
        window.addEventListener('scroll', function(event){
            var windowPos = Math.abs(Math.round(document.querySelector('html').getBoundingClientRect().top));
            var startPos = document.querySelector(section).getBoundingClientRect().top + window.pageYOffset - (window.innerHeight * num);
            if (windowPos > startPos){
                elemArr.forEach(function(el, index){
                    if (document.querySelector(el)) {
                        document.querySelector(el).style.transition = transArr[index] + 's all';
                        setTimeout( function(){
                            document.querySelector(el).style.transform = 'translate(0,0)';
                            document.querySelector(el).style.opacity = '1';
                        }, timeoutArr[index]);
                    }
                });
            }
        });
    }
}

section – селектор элемента, при прокрутке до которого начинается анимация

elemArr – массив со списком селекторов тех элементов, которые должны анимироваться

styleArr – массив со значениями x и y для каждого элемента из предыдущего массива, на которые будет сдвинут элемент относительно текущего положения (смещение на стартовую позицию для анимации)

transArr – массив с временем анимации в секундах для каждого элемента массива elemArr

timeoutArr – массив с временем задержки анимации в секундах для каждого элемента массива elemArr

num – значение отвечает за место срабатывания анимации относительно окна, где 1 – нижняя часть окна (т.е. анимация сработает, когда анимируемый элемент окажется в самой нижней области окна), а 0 – верхняя часть окна (т.е. анимация сработает тогда, когда элемент окажется в самом верху окна). Указывается без кавычек.
ПРИМЕЧАНИЕ: некоторые старые браузеры не умеют читать дефолтные значения аргументов функции, поэтому желательно указывать значение аргумента num непосредственно в момент вызова функции, а дефолтное значение удалить.

Тут могла быть ваша реклама.