https://dribbble.com/SSAdesign11 есть вот такая анимашка, клиент хочет подобную, но имажек там около 150, создавать подобное путём css анимации, конечно же возможно, но довольно трудозатратно. Подскажите плиз, возможно кто-то сталкивался с подобной реализацией на js? Заранее спасибо.
Похоже? Откройте на весь экран... или кликните в любом месте страницы...
Картиночки выстраиваются вдоль 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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Начал делать простенькое расширения для одного сайтаФункционал: инъекция пользовательских стилей на сайт
Ссылка на пост формируется из указанного пользователем заголовкаНапример заголовок "Привет мир" выдасть url /post/privet-mir , но если написать "При...