Есть ли плагин которые создает анимацию появления изображения из квадратов?

Question

[sadboy]

Привет, не встречал ли кто плагин или пример реализации на сss анимации изображения, когда картинка собирается из квадратиков. Я нашел вот такой слайдер с похожей анимацией, но проблема в том что это слайдер и придется с него доставать эту анимацию, ну и еще одна не большая проблема в том что он платный. Может кто находил подобную анимацию?

Comments

[Andrew]

В какой момент времени она должна собираться?

[sadboy]

Andrew, Как только загрузиться страница

Answer 1

[forspamonly2]

именно на css хочется? ну вот простейший вариант чисто на css:

https://codepen.io/bsl-zcs/pen/eMLgNo

а вообще, параметры отдельных тайлов надо генерировать css препроцессором или скриптом.

Comments

[sadboy]

Спасибо, большое. Нет не обязательно сss, я искал много вариантов: svg маской, сss , через js, но не нашел описания с методами реализации , или исходники.

[sadboy]

А можете подсказать как сделать это адаптивным? просто при таком способе картинке не задать размер, и получается что на маленьких разрешениях показывается часть картинки

[forspamonly2]

точно так же, но посчитать смещения тайлов в скрипте при загрузке. а их размеры задать процентами, или в том же скрипте посчитать.

Answer 2

[Stalker_RED]

Нет, готового не встречал.
Можно сделать на базе анимированной SVG маски.
https://www.google.com/search?q=svg+mask+image

Answer 3

[lukoie]

Так проще ж всего взять тот слайдер, и выковырять оттуда эффект.
Или хотя бы поглядеть его внутренности, там может есть название, или даже ссылка на тот жейквери плагин.