Анимация элементов
Анимация (появление) элементов при прокручивании страницы на чистом JS. Данный плагин разрабатывается собственными силами. danila.korotkov@gmail.com для предложений или замечаний.
Описание
Код
<div class="container" data-inviewport="scale-in">
const inViewport = (entries, observer) => {
let i = 0;
entries.forEach(entry => {
let timer = 0.3 // Стандартное время задержки при появлении нескольких элементов одновременно
if (entry.target.getAttribute('data-inviewport-once')) var once = entry.target.getAttribute('data-inviewport-once');
if (entry.target.getAttribute('data-inviewport-timer')) timer = entry.target.getAttribute('data-inviewport-timer');
if (entries.length > 1) { // На экране больше чем один элемент
let turn;
if (entry.target.getAttribute('data-inviewport-id')) turn = entry.target.getAttribute('data-inviewport-id'); // Задан ли номер для выполнения
else {
turn = i;
i++;
}
let time = timer * 1000 * turn;
if (once) { // Требуется ли повторение
if (entry.isIntersecting) setTimeout(()=> entry.target.classList.add("is-inViewport"), time);
}
else setTimeout(()=> entry.target.classList.toggle("is-inViewport", entry.isIntersecting), time);
}
else { // Таймер срабатывания не задан
if (once) { // Требуется ли повторение
if (entry.isIntersecting) entry.target.classList.add("is-inViewport");
}
else entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
}
});
};
const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //See: https ://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
// Attach observer to every [data-inviewport] element:
const ELs_inViewport = document.querySelectorAll('[data-inviewport]');
ELs_inViewport.forEach(EL => {
Obs.observe(EL, obsOptions);
});Дополнительные параметры
Последнее обновление