Анимация из массива (JS animation)

#javascript #svg #анимация

https://dribbble.com/SSAdesign11 есть вот такая анимашка, клиент хочет подобную,
но имажек там около 150, создавать подобное путём css анимации, конечно же возможно,
но довольно трудозатратно. Подскажите плиз, возможно кто-то сталкивался с подобной
реализацией на js? Заранее спасибо.
    

Ответы

Ответ 1

Похоже? Откройте на весь экран... или кликните в любом месте страницы...

Картиночки выстраиваются вдоль svg path



function reload() {
  images.classList.remove('fall')
  images.innerHTML = [...document.querySelectorAll('path')].map(handle).join('');
  setTimeout(() => images.classList.add('fall'));
}

reload();

addEventListener('click', reload);
addEventListener('resize', reload);

function handle(path) {
  let w = innerWidth/40, h = innerHeight/30;
  let len = path.getTotalLength();
  let result = ''
  for (var t = 0; t < len; t += 5) {
    let p = path.getPointAtLength(t).matrixTransform(path.getScreenCTM());
    result += ``;
  }
  return result;
}
.fall img {
  transform: translateZ(0px);
}

body {
  margin: 0;
  overflow: hidden;
  perspective: 400px;
}

img {
  position: absolute;
  transform: translateZ(1000px);
  transition-timing-function: cubic-bezier(.03,.8,.41,1.04);
}

img:hover {
  transform: scale(2);
}