Skrollr转换功能会使文本颤抖

Question

使用skrollr.js我将对内部div进行一些过渡效果，这是另一个div。内部div是相对定位的。

我的代码是

HTML结构

<div class="outer">
  <div class="inner-div" style="transition:transform .3s ease;" data-top="transform:translateY(0px)" data--80p-top="transform:translateY(300px)">
     <h1>some thing</h1>
  </div>
</div>

问题是当滚动它时（h1）会产生一个很大的垂直颤抖 什么可以解决方案？

Answer 1

只是一个小指针，我最初使用scrollr.js犯了类似的错误：

  <div class="inner-div" style="transition:transform .3s ease;" data-top="transform:translateY(0px)" data--80p-top="transform:translateY(300px)">

scrollr.js允许否定索引，但为什么需要呢？请尝试以下代码：

 <div class="inner-div" style="transition:transform .3s ease;" data-0="transform:translateY(0px)" data-80p-top="transform:translateY(300px)">

你的后续效果非常简单，如果你有时间，请查看Scrollr.js here的示例，它是一个记录良好的插件。