Intersection Observer API, плавное появление элементов

35
Алексей,

Экспериментальный скрипт добавления анимации появления элементов при сколле.
Использовать только для опытов)

var iObserver = new IntersectionObserver(function(entries) {
    entries.forEach(function (currentValue, index) {
        if (currentValue.isIntersecting === true) {
            $(currentValue.target).css('opacity', '1');
        }
    })
}, {threshold: [0]});

$('div').each(function () {
    $(this).css('opacity', '0').css('transition', 'opacity 1s');
    iObserver.observe(this);
});

Для наглядности включил данный скрипт на текущей странице.

Опубликовано 1 июня 2021
js, анимация
Поделиться
Похожие статьи
Стандартная анимация загрузки Битрикс 0
Хорошо когда при ajax показывается лоадер, еще лучше когда он стандартный, использовать его не сложн...
Читать дальше »
Алексей,
Автоматическое выполнение js в браузере при посещении сайта 0
Есть сайты, которыми мы часто пользуемся, например по работе, но на них не хватает какого-либо интер...
Читать дальше »
Алексей,
Комментарии
Зарегистрируйтесь чтобы получать уведомления об ответе
Алексей
1 июн 2021
Заметил, что нестандартные теги он не понимает, например svg, path и т.п.
Экспериментальный скрипт добавления анимации появления элементов при сколле. Использовать только для опытов)