我想重新创建可以在此页面上看到的效果:
http://people.com/chica/gabriel-zamora-male-beauty-influencer/
如果您等待它完全加载,然后滚动到“他对化妆的热情始于一个简单的愿望”部分,您会注意到文本在滚动到 View 中时以黄色背景突出显示。
试图找出最优雅、最轻量级的方式来实现这一目标(我在考虑 CSS3+Jquery)?
最佳答案
目前还不完全清楚您究竟需要什么帮助。但是通过检查您所引用的网站上的代码,他们似乎正在使用渐变作为背景,然后为该背景位置设置动画。这可以通过 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";
关于jquery - 滚动上的动画标记式文本突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43676270/