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

Question

[Максим]

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



Как и чем это можно реализовать? Желательно, чтобы было адаптивным, если, конечно с этим могут возникнуть сложности. С анимацией работал только в css, в js ни разу не делали ни каких анимаций.

Comments

[Максим]

При скролле страницы это блок должен менять свою геометрию как на рисунке в правой части.

Answer 1

[Вадим]

Для изменения геометрии используйте clip-path.
Он хорошо анимируется.
Вот пример:


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

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

В принципе у Вас тут всё легко, по сути свою позицию меняют только 2 точки - верхняя и нижняя вершина.

Answer 2

[Иван Роганов]

Жесть, конечно, но вот вам идея:


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