Как можно создать такую анимацию? Точнее с помощью чего?

Суть в том ,что блок должен быть разбит ,я думаю скриптом ,на отдельные блоки ,как показано на картинке , и каждая должна улетать по направлению стрелки поочередно. Меня интересует с помощью чего такое можно реализовать ,не сразу готовую библиотеку или плагин подключить ,а как такое можно реализовать своими руками ,я предполагаю что это может быть Canvas ,но не уверен. Прошу совету ,как реализуются подобного рода анимации.5c6f0bec5ea21211720921.png
P.S. Художник из меня так себе ,но думаю вы поняли суть ,если что ,пишите ,попробую описать подробнее)
  • Вопрос задан
  • 1000 просмотров
Решения вопроса 2
OxCom
@OxCom


Пробуйте, играйтесь с размерами блоков и позиционированием изображения. В большом блоке выглядит сносно, все сочленения все же не совпадают. Тут надо посидеть над формулой и процентами.
Ответ написан
Комментировать
Ragtime_Kitty
@Ragtime_Kitty
Мне когда-то примерно тоже самое надо было, но ума сделать все это под углом не хватило. Суть: создаем картинку, рисуем ее в canvas с размерами кусочка, получаем dataURL и вставляем его в background-image.

Тут режется все автоматом по размерам заданной картинки, но можно выбрать количество столбцов/колонок и размеры каждого кусочка. transition-delay нужно ручками задавать, в зависимости от размеров картинки. Можно резать картинку под углом через skewAngle и плясать от этого. Может ругаться на tainted canvases may not be exported, не знаю как побороть, но на локалке все норм.

За "правильность" и рациональность использования не ручаюсь ¯\_(ツ)_/¯

Ответ написан
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08 Куратор тега JavaScript
Создается N блоков, каждому задается один и тот-же фон, но со смещением, чтоб выглядело все это дело как единая картинка. Этим блокам задается одинаковый transform: skew, чтоб они стали под наклоном, а при анимации сдвигают их по одному с какой-то задержкой. Создавать блоки программно или руками дело твое.
Ответ написан
Комментировать
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
Много вложенных блоков с skew и смещаете их по X и Y. Анимировать можно через jquery или animate плагин кажется был. Ну а по сути просто по осям перемещаете
Ответ написан
Ваш ответ на вопрос

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

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