javascript - CSS 动画 - 在标题旁边从左到右滑动线条

Question

想知道我是否可以获得一些帮助/指导...

基本上，我正在构建我的投资组合网站。这是正在进行的工作，还没有完成! https://reenaverma.github.io/

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

我基本上希望灰线在每个标题的开头停止。所以对于“about reena”，它应该在“a”之前停止(而不是在下面)。

我想知道实现此目标的最佳方法？到目前为止的相关代码如下。我已经从 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同步时间。