Скомканная бумага на css?

Question

[Артур Карапетян]

Здравствуйте!
Появилась необходимость сделать эффект скомкивания квадратного листа бумаги на css/js/любой подходящей технологии.
Вопрос подскажите какую-нибудь библиотеку или способ решения этой задачи

Comments

[Артур Карапетян]

Drakonoved, при чем тут дизайнеры? Мне нужен эффект "скомкивания" квадратного дива на сайте

[Артур Карапетян]

Drakonoved, На странице есть див, стилизованный под лист бумаги. При нажатие на кнопку див (лист) скомкивается (превращается в комок бумаги) и "улетает в корзину". Мне нужно реализовать скомкивание этого дива.

[Артур Карапетян]

Drakonoved, WTF? Что могут сделать дизайнеры? Написать css анимацию? Объясните с чего бы мне идти к дизайнеру

[Артур Карапетян]

Drakonoved, тоесть вы считаете, что можно сделать только GIF

[Ankhena]

Артур, Рисуете скомканую бумажку, используете как bg.
getinstance.info/articles/css/making-sense-of-clip-path там внизу статьи про анимацию.
Дальше ваши художественные способности к пошаговой анимации сворачивания через keyframes.

Либо аналогичное на свг или канвасе.

Answer 1

[Ярослава]

Пойдет? jsdo.it/alvarobyrne/crumpled_paper

Comments

[Артур Карапетян]

Нет, нужно чтобы квадратный див, стилизованный под бумагу, становился комком бумаги:

[Ярослава]

Артур, вряд ли выйдет сделать прямо все линии, как у комка.
Я думаю, что можно сделать пошагово:
1. Создать шар (есть примеры css+js).
2. Навесить текстуру, как в примере выше, только сделать текстуру более явной (кстати, я еще видела библиотеку paper.js, может её удалось бы использовать, про неё много написано).

Answer 2

[Александр Таратин]

На webgl пожалуй возможно. Рендерите html в canvas
https://github.com/cburgmer/rasterizeHTML.js
https://github.com/tsayen/dom-to-image
https://github.com/Irrelon/html-to-canvas
Грузите canvas в текстуру
Накладываете текстуру на анимарованный меш.
https://threejs.org/examples/#webgl_animation_cloth