Каждый наверно замечал, при скролле страницы некоторых сайтов, анимированное появление блоков.
Это выглядит очень красиво и стильно. Чаще всего, такие эффекты применяют для LandingPage.
Для реализации данной задачи, хочу вам посоветовать плагин который написан на чистом JS — fadeBlock
fadeBlock — это очень простой плагин, написанный на чистом JS. Он анимирует любые элементы на сайте при прокрутке страницы.
Немного особенностей данного плагина fadeBlock:
- определяет,находится ли нужный блок в области просмотра, и затем добавляет класс к нему;
- 5 встроенных анимаций;
- можно настроить скорость анимации;
- настройка отступа от низа экрана браузера для анимированного появления блока;
- можно включить исчезновение блоков, если скролить сайт на верх
- простая настройка
Как им пользоваться fadeBlock
- На блоки которые должны появлятся при скролле страницы необходимо развесить классы:
fadeIn — появление блока без смещений
fadeRight — появление блока справа
fadeLeft — появление блока слева
fadeTop — появление блока сверху
fadeBottom — появление блока снизу
- Подключение js плагина. -js можно подключить в шапке или футере сайта. -Желательно подключить его перед вашими основными скриптами -после подключения скрипта вам необходимо задать настройки появления
- Что бы задать настройки для плагина, вам необходимо после подключенной js плагина, вставить строку с настройкой, которая выглядит след. образом:
1 2 3 |
<script> const fadeOptions = new Options(animationTime, pixelsFromBottom, reverseFade); </script> |
либо можно прописать в самом конце js-файла плагина fadeBlock.js строку с настройками
1 |
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 пикселей от низа экрана
-При скролле вверх блоки исчезать не будут
Чтобы не пропустить выход новых статей, подписывайтесь на наш telegram-канал
Оставьте ответ