Показать демонстрационные блоки
Показать границы анимации
Компонент в вашем браузере РАБОТАЕТ
Компонент в вашем браузере НЕ РАБОТАЕТ
Smooth Flow — это эстетический компонент, предназначенный для того, чтобы придать статье необычный вид, как я люблю это называть, «грёз». Добавляет блокам на странице автоматическую анимацию появления и исчезания.
Данный компонент построен на технологии, которая на момент написания данного текста не полностью поддерживается всеми браузерами (в частности Firefox). Если вы пользуетесь браузером, поддерживающим необходимые технологии, то всё отобразится так, как и было изначально задумано. Если вы пользуетесь любым другим, то изменений на странице просто не будет и вы сможете продолжить пользоваться им так, как будто этого модуля на странице вовсе нет.
Поддержка браузерами:
Также данный эффект не отобразится на вашем экране в случае, если в настройках вашего браузера выбрана настройка ограничения движущихся элементов (например если вы испытываете трудности при чтении или это влияет на ваше самочувствие).
Также для данного компонента есть возможность небольшой кастомизации. По умолчанию, размер отступа для анимации равен 20vh, то есть 20% от высоты экрана вашего устройства. Вы можете вручную изменить подобные параметры, именив соответствующие переменные CSS.
Примеры кастомизации:
--mit-flow-animation-offset: 20vh; --mit-flow-animation-offset-top: var(--mit-flow-animation-offset); --mit-flow-animation-offset-bottom: var(--mit-flow-animation-offset);
Стандартный вид
--mit-flow-animation-offset-top: 40vh; --mit-flow-animation-offset-bottom: 40vh;
«Дальнозоркий» вид
--mit-flow-animation-offset-top: 15vh; --mit-flow-animation-offset-bottom: 10vh;
Уменьшенный вид