Jquery 滚动上的动画标记式文本高亮显示

我打算重新创建可以在本页上看到的效果：

如果您等待它完全加载，然后滚动到“他对化妆的热情从一个简单的愿望开始”部分，您会注意到文本在滚动到视图时被高亮显示，背景为黄色

---

试图找出实现这一目标的最优雅、最轻量级的方法（我认为是CSS3+Jquery）？

现在还不完全清楚您到底需要什么帮助。但是通过检查你所参考的网站上的代码，他们似乎在使用渐变作为背景，然后设置背景位置的动画。这可以通过CSS动画或使用javascript或jQuery更改元素背景位置来实现。以下是我的例子：

HTML:

这将为您提供使用CSS关键帧的动画。或者，您可以像这样使用javascript和CSS：

CSS:

和javascript：

document.getElementById("hightlight").style.backgroundPosition = "-100% 0";

---

因为我们不在这里编写代码，所以您需要为我们提供一个工作代码段，其中包含您到目前为止所拥有的内容。当外部链接消失时，这个问题对未来的用户来说将是无用的，所以也可以通过文字或图像在问题中提供预期的结果。。。你应该知道所有这些，现在有一个插件可用于这种用途。这是scroll magic，一个jQuery插件，它允许您根据滚动位置设置DOM元素的动画。

#hightlight{    
    background-size: 200% auto; 
    background-image: linear-gradient(to right,#fff 50%,#ff0 50%);
    background-position: 0% 0;

    animation-name: highlight;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes highlight {
    from {background-position: 0% 0;}
    to {background-position: -100% 0;}
}

#hightlight{
    transition: 1s; 
    background-size: 200% auto; 
    background-image: linear-gradient(to right,#fff 50%,#ff0 50%);
    background-position: 0% 0;
}

document.getElementById("hightlight").style.backgroundPosition = "-100% 0";