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

【问题标题】：What's the technical term for this image animation?这个图像动画的技术术语是什么？
【发布时间】：2018-04-18 07:35:14
【问题描述】：

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

【问题讨论】：

你可以使用开发者工具来签出。
我正在尝试，但我找不到有关此动画的任何信息 :(
我不知道，但它看起来更像是一个错误而不是一个功能 :)
删除了很多项目后（这让我的浏览器变慢了:()，看来它只是放了很多该图像的副本
这一切都在这个elememt之下：document.querySelector('.stack-scroll-canvas.js-sticky-element')

标签： javascript html css animation

【解决方案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>

【讨论】：

感谢帮助，我让这变得更简单了，制作了 4 层，每层延迟滚动。它工作得很好。
为什么投反对票？我只是尝试模仿页面的动画技术。我认为它运作良好。如果你有什么想法，我愿意接受你的意见。