Вероятно, вы можете значительно повысить производительность, используя Intersection Observer (IO) вместо прослушивания события прокрутки.IO был введен, потому что прослушивание события прокрутки и вычисление высоты / ширины элементов приводит к низкой производительности.
Сначала вам нужно создать нового наблюдателя:
var options = {
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
Здесь мы указываем, что, как только наблюдаемый элемент становится видимым на 100%, должен быть выполнен некоторый обратный вызов.
ЗатемВы должны указать, какие элементы наблюдать, в вашем случае, я думаю, это будет:
var target = document.querySelector('.wow');
observer.observe(target);
Таким образом, мы определяем, что как только любой элемент с классом "wow" будет видим на странице, обратный вызов получаетвыполняется:
var callback = function(entries, observer) {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// target element:
});
};
Здесь вы указываете, что должно происходить для каждого элемента «вау» на вашей странице, который становится видимым.
Если вы используете CSS для анимации, а не JS, тогдаанимации теперь должны быть плавными.Это также зависит от того, какие параметры вы анимируете, здесь - хороший список свойств , чтобы избежать анимации с помощью CSS.
Я не буду копировать весь список здесь, но наиболее важными будут отступы, ширина, высота и положение.
Редактировать: Если вам нужно поддерживать более старые браузеры, чем использовать этот (официальный) polyfill из w3c , он воссоздает наблюдателя пересечения с прослушиванием событий прокрутки.Так что он будет работать медленнее в старых браузерах, с этим ничего не поделаешь.Но на более новых будет увеличение производительности.