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

Question

[VegasChickiChicki]

Суть в том ,что блок должен быть разбит ,я думаю скриптом ,на отдельные блоки ,как показано на картинке , и каждая должна улетать по направлению стрелки поочередно. Меня интересует с помощью чего такое можно реализовать ,не сразу готовую библиотеку или плагин подключить ,а как такое можно реализовать своими руками ,я предполагаю что это может быть Canvas ,но не уверен. Прошу совету ,как реализуются подобного рода анимации.
P.S. Художник из меня так себе ,но думаю вы поняли суть ,если что ,пишите ,попробую описать подробнее)

Comments

[Вазген Алексанян]

А этот блок целая картинка будет? Или же эти строки отдельные блоки и вних может быть совершенно раззный контент? Так как это важна

[VegasChickiChicki]

VazgXa, Я планировал это использовать как прелодер или переход между страницами. Это будет целый блок на весь размер экрана.

Answer 1

[OxCom]

Пробуйте, играйтесь с размерами блоков и позиционированием изображения. В большом блоке выглядит сносно, все сочленения все же не совпадают. Тут надо посидеть над формулой и процентами.

Answer 2

[Ragtime Kitty]

Мне когда-то примерно тоже самое надо было, но ума сделать все это под углом не хватило. Суть: создаем картинку, рисуем ее в canvas с размерами кусочка, получаем dataURL и вставляем его в background-image.

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

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

Comments

[Ragtime Kitty]

Тоже самое, но через grid и bg-img, легче, но как под углом резать я все еще хз https://codepen.io/Ragtime-Kitty/pen/KEwqje

Answer 3

[profesor08]

Создается N блоков, каждому задается один и тот-же фон, но со смещением, чтоб выглядело все это дело как единая картинка. Этим блокам задается одинаковый transform: skew, чтоб они стали под наклоном, а при анимации сдвигают их по одному с какой-то задержкой. Создавать блоки программно или руками дело твое.

Answer 4

[Виталий Киренков]

Много вложенных блоков с skew и смещаете их по X и Y. Анимировать можно через jquery или animate плагин кажется был. Ну а по сути просто по осям перемещаете

Comments

[VegasChickiChicki]

Я понимаю что их нужно просто по осям сдвинуть ,но не могу понять как можно так разрезать блок.
Конечно можно просто разрезать фотку в фш ,но я думаю будет лучше сделать с помощь JS.

[Виталий Киренков]

VegasChickiChicki, Про то, что это одна разрезанная фотка вы не говорили. Это важная новая вводная

[VegasChickiChicki]

Виталий Киренков, Либо вы смотрите в книгу и видите фигу ,либо я написал не корректно
"Суть в том ,что блок должен быть разбит ,я думаю скриптом ,на отдельные блоки ,как показано на картинке ..."

[Виталий Киренков]

VegasChickiChicki, Вы не в том положении, чтобы дерзить, если просите подсказки.
exelum.com - вот пример 'разрезания' блока. И тут данные. Так, что то, что вы написали, может быть интерпретировано по разному.

[VegasChickiChicki]

Виталий Киренков, Боже ,как все нынче чувствительные пошли ,я даже не пытался дерзить ,ну да ладно...
Я не могу понять где в примере который вы скинул ,"разрезание" картинки? Я нашел только списки... Или это скрипт так разрезает картинки и делает из них списки? :)

[Exploding]

VegasChickiChicki, О боже, как же туго доходит до некоторых!))) Нет никакого разрезания. В каждом блоке находится картинка в полном размере, но смещена в сторону таким образом, чтобы была видна только нужная в данном куске ее часть. Андерстэнд?

[VegasChickiChicki]

Exploding, Да ,я этот вариант уже рассматриваю,но считаю его от части костыльным. Если сделать так ,то это сработает на одну картинку ,но что если такой эффект ,к примеру , попытаться прикрутить к слайдеру? Если на каждую фотку нужно ,к примеру 10 блоков ,то на 5 50? Возможно тогда как то нужно будет у этих 10ти блоков каждый раз менять src ,подумаю. Но в целом хотелось бы конечно понять как именно можно "отрезать" кусок фотки ,поместить его в новую переменную и отобразить уже новую ,вырезанную фотку. Вот тут от части то о чем я говою https://revolution.themepunch.com/parallax-zoom-sl... Хотя я ,если честно , не смотрел в код ,возможно тут и не разрезание ,а что то другое ,но очень похоже )

[Exploding]

VegasChickiChicki, Почему же костыльный? Главное настроить стили все правильно, а кол-во блоков уже "до лампочки". Оформив js-код в виде плагина, можно их кол-во задавать в параметрах инициализации и генерить "на лету".
Типа такого ("на коленке", на примере jq, но общая суть главное):

$("#my-slider").trueSlide({
   parts: 15, //кол-во "кусков"
   angle: 45, //угол поворота
   timeout: 2500, //таймаут смены слайда
   transitionFunc: "ease-in-out" //css-функция анимации
   // ... ну и так далее
});

А в коде самого плагина, определяем ширину #my-slider, делим на parts и в цикле создаем нужное кол-во блоков, в них пихаем картинку в виде фона или как там уже будет угодно, в каждой итерации цикла смещая ее на инкремент ширины "куска". Или может еще как вариант - попробовать каждый "кусок" делать дочерним в текущем, тогда все можно будет в css фигануть и задать только параметр смещения в css - инлайн стилем для главного контейнера.

[VegasChickiChicki]

Exploding, Буду пробовать ,спасибо! Нужно только разобраться как повернуть ровно это все дело)

[Exploding]

VegasChickiChicki, Вот очень часто помогает быстро сделать заготовку для анимации ну и там трансформации разные... смотрите в общем, может будет полезным cssanimate.com