Можно ли реализовать анимацию всасывания контента в некую дыру (точку)?

Question

[Happy-Child]

Зашли на страницу. Скролим её. Дошли до определённой секции, нажали на кнопку. Далее весь контент как бы сжимается и залетает в точку (в дыру) по середине экрана.

Comments

[l4m3r]

А-ля воронка в раковине? Мне кажется, нет.

[Happy-Child]

l4m3r, Можно и такой эффект, да, главное чтобы всё сжималось соответствующим образом.

[Александр]

Можно, но скорее всего быдут сильно тормозить.
Убивать производительность ради свистоперделки - унылое решение.

[Сергей Соколов]

Не меняя геометрию, прямые останутся прямыми, можно css анимацией scale в ноль с небольшим поворотом.

[Happy-Child]

Александр, и всё же, какое может быть решение)

[arsenty]

Можно, но для этого потребуется отрисовка страницы через JS и SVG, что подойдёт не под любой контент.

[Александр]

Happy-Child, используйте трансформацию и перспективу.

[Ragtime Kitty]

canvas2html и анимацию в канвасе. Попробовать можно, в принципе

Answer 1

[rPman]

Для начала ответьте на вопрос, хватит ли вам не попиксельного сворачивания а абзацами или словами? например простым скриптом на javascript вы можете рекурсивно пройтись по всем элементам на странице и узнать их координаты (прямоугольник), затем меняете всем позиционирование на абсолютное, по таймеру, меняя эти координаты и размеры.

Если элементы слишком большие, то тут придется проявить смекалку, что делать с картинками, что делать с пустыми блоками, через которые была сделана верстка и т.п. С текстом просто, его можно заменить на серию span по предложениям или словам, а уже эта конструкция разлетится по вашему алгоритму по спирали.