*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
min-height:100vh;
overflow:hidden;
background:#000;
}
.container{
position:relative;
display:flex;
flex-wrap:wrap;
transform-style:preserve-3d;
perspective:1000px;
}
.container .block{
position:relative;
width:10vw;
height:10vw;
background:url(2.png);
background-size:cover;
background-attachment: fixed;
background-position:center;
/* border:1px solid #111;
box-sizing:border-box; */
transform-style:preserve-3d;
}
<body>
<div class="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
let container = document.querySelector('.container');
for(var i = 0;i <= 450;i++){
let block = document.createElement('div');
block.classList.add('block');
container.appendChild(block);
}
let block = document.querySelectorAll('.block');
let animation = anime.timeline({
targets: block,
easing: 'easeInOutExpo',
loop: true,
delay:anime.stagger(10,{start:50}),
})
animation
.add({
scale:0,
translateX:function(){ return anime.random(360,100);},
translateY:function(){ return anime.random(0,2100);},
rotate:function(){ return anime.random(-360,360);},
duration:function(){ return anime.random(500,3000);}
})
.add({
scale:1,
translateX:0,
translateY:0,
rotate:0,
duration:function(){ return anime.random(500,3000);}
})
</script>
</body>
