Как реализовать подобный эффект текста?

Автор вопроса: Александр Мерный

Увидел на сайте www.amandabraga.com при скроле интересный эффект текста. Текст/изображение которое ближе к нижней границе браузера при скроле искажается и встает на место. Попробовал сделать что то подобное на blotter.js но не получилось. Подскажите, как реализовать такой эффект?

Источник

Ответы (1 шт):

Автор решения: Zhihar

Очень похоже на эффект перспективы

https://css-tricks.com/almanac/properties/p/perspective/#:~:text=The%20perspective%20CSS%20property%20gives,more%20impressive%20the%20visual%20effect.

https://3dtransforms.desandro.com/perspective

https://html5book.ru/3d-transform/

Хотя залез в код сайта (через консоль разработчика - F12)

Внизу сайта есть невидимый блок высотой с эффект, скрытый. Аналогично есть блок сверху, тоже скрытый.

Когда пользователь скролит, то эти блоки становятся видимыми (в зависимости от направления скрола)

У них появляется css-стиль translate3d и rotateX, которые меняются со временем (задана анимация тоже через css-стиль)

→ Ссылка