CoreReveal

Живой MDC-рендер и исходник для копирования.

Живой рендер

Так ContentRenderer отрисует этот контент на реальной странице.

Плавное проявление блока при появлении во вьюпорте. В контенте тег просто оборачивает текст: анимация срабатывает у читателя при скролле, при prefers-reduced-motion блок виден сразу.

Появление блока

Этот блок плавно проявится, когда читатель долистает до него.

Направление и задержка

direction — откуда появляется, delay — пауза в мс (для последовательного появления соседних блоков):

Блок выезжает слева после короткой паузы.

Исходник (MDC)

Тот же код текстом — скопируйте в свой контент как есть.

MDC

Плавное проявление блока при появлении во вьюпорте. В контенте тег просто оборачивает текст: анимация срабатывает у читателя при скролле, при prefers-reduced-motion блок виден сразу.

### Появление блока

::core-reveal
Этот блок плавно проявится, когда читатель долистает до него.
::

### Направление и задержка

`direction` — откуда появляется, `delay` — пауза в мс (для последовательного появления соседних блоков):

::core-reveal{direction="left" delay="150"}
Блок выезжает слева после короткой паузы.
::