Задать вопрос
@Temwin

Как в вебе (HTML/CSS/JS) повторить эффект переключения слайдов motion blur?

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

Что я уже пробовал:
-Простые CSS-переходы с translateX и filter: blur().
-Разные кривые cubic-bezier для имитации рывка.
-Анимацию через requestAnimationFrame с покадровым изменением transform и filter.

Мой текущий код:
https://github.com/temwin/test-tasks/tree/main/tas...
  • Вопрос задан
  • 182 просмотра
Подписаться 1 Сложный 3 комментария
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Академия Эдюсон
    Frontend-разработчик
    9 месяцев
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик расширенный
    13 месяцев
    Далее
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега Вёрстка
Creative frontend developer
В вашем примере происходит неравномерное растягивание картинок. Это не совсем классический motion blur, где мы что-то размыливаем. Тут нужны более хитрые трансформации.

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

Стандартный способ решения подобных задач - WebGL. В вашем конкретном случае никакая сложная математика не нужна. Можно обойтись самыми простыми шейдерами.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы