SCP Foundation

Отключить анимацию

Показать границы анимации

Smooth Flow — это эстетический компонент, предназначенный для того, чтобы придать статье необычный вид, как я люблю это называть, «грёз». Добавляет блокам на странице автоматическую анимацию появления и исчезания.

Данный компонент построен на технологии, которая на момент написания данного текста не полностью поддерживается всеми браузерами (в частности Firefox). Если вы пользуетесь браузером, поддерживающим необходимые технологии, то всё отобразится так, как и было изначально задумано. Если вы пользуетесь любым другим, то изменений на странице просто не будет и вы сможете продолжить пользоваться им так, как будто этого модуля на странице вовсе нет.

Поддержка браузерами:

• caniuse.com
• MDN

Также данный эффект не отобразится на вашем экране в случае, если в настройках вашего браузера выбрана настройка ограничения движущихся элементов (например, если вы испытываете трудности при чтении или это влияет на ваше самочувствие).

Также для данного компонента есть возможность небольшой кастомизации. Вы можете вручную изменить все параметры, именив соответствующие переменные CSS. Полный перечень всех доступных 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-max-opacity: 1;  /* Прозрачность контента в центре экрана */
  --mit-flow-min-opacity: 0;  /* Прозрачность контента за пределами экрана */
  --mit-flow-transform-offset: 50px;  /* Смещение контента при анимации */
  --mit-flow-transform-stretch: 1;  /* Растягивание контента при анимации */
  --mit-flow-transform-rotate: 0deg;  /* Наклон контента при анимации */

Include имеет ровно два параметра — content-selectors и container-selectors. Оба параметра являются опциональными и определяют то, к каким блокам и каким образом применить анимацию данного компонента.

• Параметр content-selectors принимает CSS-селекторы, указывающие на блоки, к прямым наследникам которого должна быть применена анимация. Если параметр не предоставлен, поведение аналогично content-selectors = #page-content.
• Параметр container-selectors принимает CSS-селекторы, указывающие на блоки, к которым должна быть применена анимация. Если параметр не был предоставлен, поведение аналогично container-selectors = #page-title.

Принимаемые селекторы могут быть сколь угодно комплексными. Единственное ограничение, которое необходимо держать в уме — вы не можете передать селектор любого псевдоэлемента. Это не должно сломать отображение, но к псевдоэлементам анимация не применится.

Пример добавления анимации на страницу:

Если вы хотите лишь пользоваться только отдельными классами для контроля анимации (о них ниже), то просто введите любой невалидный селектор для content-selectors и container-selectors:

И наконец, можно сделать включение без параметров. В таком случае отображение будет идентично тому, которое вы наблюдаете прямо сейчас:

Вручную управлять тем, к чему анимация будет или не будет применена, можно с помощью классов .mit-flow-allow, .mit-flow-allow-self, .mit-flow-forbid и .mit-flow-forbid-self. Классы без суффикса -self отвечают за то, должно ли содержимое контейнера быть подвержено анимации, а с суффиксом -self — должен ли сам контейнер быть подвержен анимации. Для первых также доступен подкласс .mit-flow-clip, который не позволяет содержимому выходить за пределы блока. Данный подход способен вызвать ошибки при отображении некоторых блоков, так что будьте бдительны при использовании.

Примеры кастомизации:

  --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;

Уменьшенный вид