Как реализовать появление объектов из точки в центре?

Question

[Акваланг]

Собственно, сабж.

Задача: сделать фоном 50 объектов, которые заполняют собой весь экран и находятся в рандомных позициях.

Само по себе это не сложно, если бы не второе условие: при загрузке страницы блоки должны быть невидимы, а после окончательной загрузки страницы, объекты должны появиться из своих центров, что ли, и до полного размера. Типа как show(), только не из угла, а из центра.

В общем, ищу решение или плагин, буду благодарен, если подскажете.

Comments

[n1ksON]

Не понятно как реализовать появление в центре? Или как запускать функцию появления объектов после полной загрузки? Или и то и другое?

Answer 1

[0xD34F]

Скрыть элементы через задание им нулевого размера:

.hidden {
  transform: scale(0);
}

Чтобы появлялись плавно, добавить transition:

.item {
  transition: transform 0.5s;
}

Когда надо элементы показать, снять класс:

document.querySelectorAll('.item').forEach(n => n.classList.remove('hidden'));

https://jsfiddle.net/dgo3jmsa/

Comments

[Акваланг]

Идеально! Спасибо!