Эффект пиксельного искажения текста при ховере.
Сделан через canvas, Three.js и кастомные шейдеры.
Чтобы использовать — просто подключи класс и вызови его, передав свой контейнер, в который встроится Canvas:
1. Секция с эффектом
2. Стили с embed
.css
3. код перед <body>
.html
ShaderTextDistortion Class
.js
Пример вызова
.js
Text
В класс можно передать:
1. Текст
2. Шрифт
3. Начертание
4. Цвет текста
Canvas прозрачен, можно использовать любой фон под ним.
Адаптивность:
Размер шрифта в canvas адаптируется под ширину и высоту самого canvas.