这个图像动画的技术术语是什么？

Question

有谁知道这个图像的技术术语 https://yelvy.com 滚动动画(这个重影(？

Answer 1

这是我的猜测(我建议不要这样做，因为它看起来很像滞后动画(

let imags = [...document.querySelectorAll('.sample.imag')]
let real = document.querySelector('.sample.real')
let x = real.getClientRects()[0].x
let anchor = x
function updatePos(){
  x = real.getClientRects()[0].x;
  anchor = anchor*0.8 + x*0.2;
  if(Math.abs(anchor-x)<1){anchor=x;}
}
setInterval(()=>{updatePos();blend()},200)
function blend(){
  if(anchor==x)return;
  let length = imags.length
  let delta = anchor-x
  let unit = delta/length
  for(let index in imags){
    imags[index].style.transform = `translate(${unit*(length-index+1)}px, 0px)`
  }
}

.largearea{
  width:200vw;
  padding-left:100px;  
}
.sample{
  height:50px;
  width:50px;
  background-color:blue;
  border:1px solid red;
}
.real{
  position:relative;
}
.imag{
  position:absolute;
  z-index:-1
}

<div class="largearea">
  <div class="sample real">
    <div class="sample imag"></div>
    <div class="sample imag"></div>
    <div class="sample imag"></div>
    <div class="sample imag"></div>
  </div>
</div>