Анимированное блоков на сайте на чистом JS. Плагин fadeBlock

Каждый наверно замечал, при скролле страницы некоторых сайтов, анимированное появление блоков.
Это выглядит очень красиво и стильно. Чаще всего, такие эффекты применяют для LandingPage.

Для реализации данной задачи, хочу вам посоветовать плагин который написан на чистом JS — fadeBlock

fadeBlock — это очень простой плагин, написанный на чистом JS. Он анимирует любые элементы на сайте при прокрутке страницы.

Плагин на github

Немного особенностей данного плагина fadeBlock:

• определяет,находится ли нужный блок в области просмотра, и затем добавляет класс к нему;
• 5 встроенных анимаций;
• можно настроить скорость анимации;
• настройка отступа от низа экрана браузера для анимированного появления блока;
• можно включить исчезновение блоков, если скролить сайт на верх
• простая настройка

Как им пользоваться fadeBlock

1. На блоки которые должны появлятся при скролле страницы необходимо развесить классы:

fadeIn — появление блока без смещений
fadeRight — появление блока справа
fadeLeft — появление блока слева
fadeTop — появление блока сверху
fadeBottom — появление блока снизу

2. Подключение js плагина. -js можно подключить в шапке или футере сайта. -Желательно подключить его перед вашими основными скриптами -после подключения скрипта вам необходимо задать настройки появления
3. Что бы задать настройки для плагина, вам необходимо после подключенной js плагина, вставить строку с настройкой, которая выглядит след. образом:

<script>
   const fadeOptions = new Options(animationTime, pixelsFromBottom, reverseFade);
</script>

либо можно прописать в самом конце js-файла плагина fadeBlock.js строку с настройками

const fadeOptions = new Options(animationTime, pixelsFromBottom, reverseFade);

Расшифровка на реальном примере: const fadeOptions = new Options(1, 100, false);
-Время анимации 1 секунда
-Появление блока будет происходить когда он будет находится на расстоянии 100 пикселей от низа экрана
-При скролле вверх блоки исчезать не будут

Чтобы не пропустить выход новых статей, подписывайтесь на наш telegram-канал