CSS动画 - 在标题

Question

想知道我是否能得到一些帮助/方向......

基本上，我正在构建我的投资组合网站。这里的工作正在进行中，尚未完成！ https://reenaverma.github.io/

基本上，当您向下滚动页面时，您会看到一条灰线从左侧移动到屏幕中间。它应该基本上是一个伴随滚动标题的动画。

我基本上希望在每个标题的开头停止灰线。因此，关于reena＆＃39;，它应该在＆＃34; a＆＃34;之前停止（不在下面）。

我想知道实现这一目标的最佳方法吗？到目前为止的相关代码如下。我已经从google和stackoverflow获得了一些。

我想我可以在div之前删除标题，（因此动画位于标题左侧的div中）。并使用animate.js fadein / slidein。但我只是想知道是否有更好/更好的方法来做到这一点？

HTML

<section class="section-white">
        <div class="container">
          <div class="flex-grid">
            <div class="col-white">
              <h2><span>about reena</span>
                <div class="line"></div>
              </h2>
              <!-- <div id="trainMotion">
                <img src="http://i.imgur.com/uKxkshD.png" alt="" 
                class="line">

              <p>A Full Stack Developer etc etc etc...</p>
            </div>
          </div>
        </div>
      </section>

CSS：

.line {
 display: block;
 position: relative;
 margin: 0 auto;
 height: 3px;
 background-color: #ccc;
 width: 150px;
 left: -300px;
 transform: translateX(-50%);
}

JAVASCRIPT

$(window).on('scroll',function(){
  const trainPosition = Math.round($(window).scrollTop() / 
$(window).height() * 100);
$('.line').css('transform','translateX('+(trainPosition-30)+'%)');
});

谢谢！

Answer 1

您可以将<h2>容器分为两部分。并在标题旁边添加动画容器，确保动画仅限于该容器。

我正在添加codepen link，这可能有所帮助。 Link

在这种情况下，我限制了动画容器的宽度。您可以使用JS同步时间。

Answer 2

您需要使用CSS中transform: translateX(-50%);的值和JS中的+(trainPosition-30)+'%)来获取适合您项目的目标坐标。如果您的translateX值是起始位置，那么滚动时您将额外增加30％。

我不知道这是最干净的选择，但您可以尝试使用媒体查询，以确保在所有屏幕尺寸上都能达到您想要的位置。