Gimir
@Gimir
JavaScript dev

Как сделать glitch эффект в css или JS?

Доброго времени суток!
Каким образом можно сделать такой эффект в CSS или JS?
5bb251d5a9b2c520470042.gif
  • Вопрос задан
  • 4219 просмотров
Решения вопроса 2
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Сходите на codepen и посмотрите демки с первых 3-4 страниц по запросу "glitch". Там есть самые разные варианты того, как этот эффект можно сделать.
Ответ написан
Комментировать
@geektimer
В основном для таких эффектов используется canvas с применением различных фильтров и хардкода на js, либо на pure css (зависит от опыта и упорства). Так же можно использовать WebGL/threejs (тот же canvas и js, только 3d), это если надо совсем заморочиться и получить супер-эффект.
Как именно делать подобные эффекты под веб нативно (js/css) - тут вряд ли есть какое-то универсальное решение, один плагин или подход, так как все круто выглядящие моушн-эффекты в основном создаются в специальных программах, по типу after effects, где есть куча всяких специализированных настроек, масок, эффектов, эквалайзеров, и затем все это долго (или не очень) рендерится в видеоряд. Увы, непосредственно для веба таких программ пока нет (может я не в курсе), поэтому тут либо вставлять готовое видео/гиф, либо пытаться интерпретировать эффекты самому (собственно, как и сделаны примеры на codeopen), внимательно изучая кадры, слои, анимацию, в общем импровизировать, так как моушн-дизайн в вэбе - это отдельное искусство, и такие специалисты очень-очень востребованы.
Так что если это интересует, могу посоветовать начать с готовых примеров на codeopen, как вам написали выше, а дальше можно освоить after effects для понимания всех тонкостей моушн-графики, можно посмотреть в сторону adobe animate, unity, unreal, ну и, конечно, быть js ninja :)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы