jquery - 滚动上的动画标记式文本突出显示

Question

我想重新创建可以在此页面上看到的效果:

http://people.com/chica/gabriel-zamora-male-beauty-influencer/

如果您等待它完全加载，然后滚动到“他对化妆的热情始于一个简单的愿望”部分，您会注意到文本在滚动到 View 中时以黄色背景突出显示。

试图找出最优雅、最轻量级的方式来实现这一目标(我在考虑 CSS3+Jquery)？

Answer 1

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

HTML:

<p>
Some text before
<span id="hightlight">Your text here</span>
Some text after
</p>

带有 CSS 动画的 CSS:

#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;}
}

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

CSS:

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

和javascript:

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