javascript - 为文本创建摆动效果

Question

所以我想要发生的是，当查看 Span 时，文本是正常的，但当您向下滚动时，它开始移动，直到它看起来像这样:

效果前:

效果发生时:

标题由每个字母的跨度表示。在初始状态下，每个顶部像素值为 0。但如前所述，它的想法是随着滚动值的变化而变化。

我想通过 JS 和 jQuery 跟踪滚动位置，然后根据需要更改像素值。但这就是我一直遇到的麻烦。让它顺畅也是另一个问题。

Answer 1

使用数学函数 sine and cosine ，对于分别位于偶数和奇数索引处的字符，随着函数的图形像波浪一样上下移动。这将创建一个平滑的效果:

cos(x) == 1 - sin(x)，所以在某种意义上，每个字符都将是下一个字符的“相反”以创建分散的外观:

function makeContainerWiggleOnScroll(container, speed = 0.01, distance = 4) {
  let wiggle = function() {
    // y-axis scroll value
    var y = window.pageYOffset || document.body.scrollTop;
    // make div pseudo-(position:fixed), because setting the position to fixed makes the letters overlap
    container.style.marginTop = y + 'px';
    for (var i = 0; i < container.children.length; i++) {
      var span = container.children[i];
      // margin-top = { amplitude of the sine/cosine function (to make it always positive) } + { the sine/cosine function (to make it move up and down }
      // cos(x) = 1 - sin(x)
      var trigFunc = i % 2 ? Math.cos : Math.sin;
      span.style.marginTop = distance + distance * trigFunc(speed * y)/2 + 'px';
    }

  };
  window.addEventListener('scroll', wiggle);
  wiggle(); // init
}

makeContainerWiggleOnScroll(document.querySelector('h2'));

body {
  height: 500px;
  margin-top: 0;
}
span {
  display: inline-block;
  vertical-align: top;
}

<h2>
  <span>H</span><span>e</span><span>a</span><span>d</span><span>e</span><span>r</span>
</h2>

重要的样式说明: span 的 display 必须设置为 inline-block，这样 margin-顶部 有效。