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

95
03 июля 2021, 23:50

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

Answer 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 += `<img class="img" style='transition: ${1 + Math.random()}s;   
        left:${p.x-w/2}px; top: ${p.y-h/2}px;width:${w}px; height:${h}px'  
        src='https://picsum.photos/id/${Math.floor(Math.random()*50)}/50/50'>`; 
  } 
  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); 
}
<svg id="svg" viewbox=0,0,100,100 height=100vh width=100vw> 
  <path fill=none id=p1 d="m25,70v-40l-20,30h25"></path> 
  <path fill=none id=p2 d="m38,40a12,12,0,0,1,24,0v20a12,12,0,0,1,-24,0v-20"></path> 
  <path fill=none id=p3 d="m90,70v-40l-20,30h25"></path> 
</svg> 
<div id=images></div>

READ ALSO
Как программно делать css Inject chrome extension?

Как программно делать css Inject chrome extension?

Начал делать простенькое расширения для одного сайтаФункционал: инъекция пользовательских стилей на сайт

90
Убрать пробелы в url

Убрать пробелы в url

Ссылка на пост формируется из указанного пользователем заголовкаНапример заголовок "Привет мир" выдасть url /post/privet-mir , но если написать "При...

103