mavsan
@mavsan

Как анимировать изменение геометрии блока?

В техническом задании к сайту есть задача анимировать изменение блока при скроллинге страницы:

612c1966724cc907863767.jpeg

Как и чем это можно реализовать? Желательно, чтобы было адаптивным, если, конечно с этим могут возникнуть сложности. С анимацией работал только в css, в js ни разу не делали ни каких анимаций.
  • Вопрос задан
  • 123 просмотра
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега CSS
Верставший фронтендер
Для изменения геометрии используйте clip-path.
Он хорошо анимируется.
Вот пример:


Всё что нужно для адаптивности - задавайте ключевые точки в процентах.

Ну и всё, осталось добавить обработчик события scroll и просто либо менять предзаготовленные классы на этот элемент, либо перезаписывать значения точек clip-path в style - зависит от того, насколько плавно, с какой точностью и до каких границ хотите анимировать изменение геометрии.

В принципе у Вас тут всё легко, по сути свою позицию меняют только 2 точки - верхняя и нижняя вершина.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Nurked
@Nurked
Птица-говорун. Писец пером, программец компьютером
Жесть, конечно, но вот вам идея:
612c27971e248504088406.jpeg

Кладёте всё в два дива и преобразуете вашу форму в SVG. Это можно будет изменять с помощью javascript. Тут придётся подучить javascript и разобраться как работать с SVG. Более того, тот же javascript надо будет использовать для того, чтобы сделать контент адаптивным, поскольку надо будет постоянно измерять размер экрана для правильной подгонки блога
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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