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

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

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

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

Плагин на github

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

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

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

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

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

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

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

ПАРАМЕТРЫ ОПИСАНИЕ ЗНАЧЕНИЕ DEFAULT
animationTime Время анимации 1,2, 2.5,3 и т.д 1
pixelsFromBottom Отступ от низа экрана браузера 50, 100, 124 и т.д 0
reverseFade Исчезновение блоков, если проскролить сайт обратно вверх true / false false

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

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

Оставьте ответ

comment-avatar

*