Анимация элементов

Анимация (появление) элементов при прокручивании страницы на чистом JS. Данный плагин разрабатывается собственными силами. [e-mail] для предложений или замечаний.

Статья в разработке

Описание

В случае, если на экране, в один момент времени, элементов не больше одного, то они будут появляться один за другим (по ходу появления) без задержки. Если элементов больше чем один, то они будут появляться с задержкой (устанавливается в код js, параметр timer).

Если есть необходимость изменить порядок появления, например сделать чтобы два элемента появлялись одновременно, то пользуйтесь параметром - "data-inviewport-id". (см. Дополнительные параметры).

Здесь будет наглядный пример

Код

Код (позже будет добавлен в виде отдельных файлов):

HTML

Для работы необходимо добавить к элементу страницы минимальный код:

 <div class="container" data-inviewport="scale-in">

JavaScript

 
   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);
   });

CSS

[data-inviewport="scale-in"] {
   transform: translateX(20px);
}
[data-inviewport="scale-in"].is-inViewport {
   transform: translateX(0px);
   transition: transform 1s;
}

[data-inviewport="flash"] {
   opacity: 0;
}
[data-inviewport="flash"].is-inViewport {
   opacity: 100%;
   transition: opacity 1s;
}

Дополнительные параметры

Параметр	Значение
data-inviewport="flash"	Тип анимации (обязательный).
data-inviewport-once="true"	Требуется ли повторять анимацию каждый раз, когда элемент появляется на странице.
data-inviewport-timer="0.5"	Время задержки в секундах перед началом анимации. Работает задержка при условии, что анимированных элементов на экрана в момент вызова(показа) больше одного.
data-inviewport-id="1"	Номер под которым будет срабатывать анимация (если не указывать, то этот номер будет порядковым). Начинается отчет с элемента с номером - 0!