Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
fadeBlock.css
fadeBlock.js

README.md

fadeBlock - плагин анимированного появление блоков

Автор плагина: Denys Popov

При помощи данного плагина можно реализовать анимированное появление и исчезновение блоков при скролле сайта

Плагин написан на чистом JS

Особенностей плагина fadeBlock

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

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

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

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

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

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

  
    <script>
      const fadeOptions = new Options(animationTime, pixelsFromBottom, reverseFade);
    </script>
  
либо можно прописать в самом конце js-файла плагина fadeBlock.js строку с настройками
  
      const fadeOptions = new Options(animationTime, pixelsFromBottom, reverseFade);
  
Параметры Описание Значение 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 пикселей от низа экрана
-При скролле вверх блоки исчезать не будут

Если есть вопросы или предложения по работе плагина, пишите на почту popovdenys@gmail.com

You can’t perform that action at this time.