I’m trying to create a photo dispersion effect with the help of animejs.
Also, I’ve divided my background image in small blocks by keeping the background position fixed and till now its fine. like this:
But when I include anime js in it, my background doesn’t seems to be a single one. Those all block takes same part of the image like this:
Here is the complete code:
let photoContainer = document.querySelector(".photoContainer")
for(let i = 0; i<100; i++){
let ele = document.createElement("div");
ele.classList.add("block");
photoContainer.appendChild(ele);
}
let block = document.querySelectorAll(".block")
let animation = anime.timeline({
targets: block,
easing: "easeInOutExpo",
loop: true,
delay: anime.stagger(20, {start:0}),
})
animation
.add({
delay: 4000,
scale: 0,
translateX: function(){return anime.random(-360,2100);},
translateY: function(){return anime.random(-360,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(2000,3000);}
})
.photoContainer{
position: relative;
display: flex;
flex-wrap: wrap;
transform-style: preserve-3d;
border: 2px solid red;
}
.photoContainer .block{
position: relative;
width: 5vh;
height: 5vh;
transform-style: preserve-3d;
perspective: 1000px;
box-sizing: border-box;
border: 2px solid green;
background-image: url(img.png);
background-color:red ;
background-size: 50vh 50vh;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
}
.dispersionContainer{
width: 50vh;
height: 50vh;
margin: 0px auto;
/* border-radius:50% ; */
background-color: black;
overflow: hidden;
border: 2px solid red;
}
<body>
<section id="spanContainer">
<div class="dispersionContainer">
<div class="photoContainer"></div>
</div>
</section>
</body>
Note: When I pushed this code to github previously, it was fine but when I cloned it again this problem arised.
Thanks in advance.