为文本创建摆动效果

Question

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

效果前：

效果发生时：

header 由每个字母的跨度表示。在初始状态下，每个顶部像素值都是 0。但是上面提到的想法是随着滚动值的变化而变化。

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

Answer 1

像这样的东西将是你的 JS 功能的核心：

window.addEventListener('scroll', function(e) {
  var scrl = window.scrollY

  // Changing the position of elements that we want to go up
  document.querySelectorAll('.up').forEach(function(el){
    el.style.top = - scrl/30 +'px';
  });

  // Changing the position of elements that we want to go down
  document.querySelectorAll('.down').forEach(function(el){
    el.style.top = scrl/30 +'px';
  });
});

我们基本上是在监听 滚动事件 ，检查用户滚动了多少，然后通过偏移我们的跨度 （我已分类为上下）

JSBin Example

Something you can improve on yourself would be making sure that the letters wont go off the page when the user scrolls a lot.
You can do this with simple math calculation, taking in consideration the window's total height and using the current scrollY as a multiplier.

- 正如 RokoC 指出的那样，性能还有改进的空间。
实施一些去抖动或其他类型的限制器

Answer 2

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

cos(x) == 1 - sin(x)，所以在某种意义上，每个角色都将是下一个角色的 "opposite"，从而创造出那种分散的外观：

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>

重要的样式说明： 跨度的 display 必须设置为 inline-block，以便 margin-top 有效.

为文本创建摆动效果

Create a wiggle effect for a text

html

javascript

css

jquery

jquery-effects

JSBin Example