尝试使用 JS 突出显示文本
Trying to highlight a text using JS
我试图在页面滚动时突出显示文本,它被标记在下方,根据我在网上找到的内容,代码如下所示。但似乎我做错了什么,我无法做对。
请注意我是新手,刚开始学习网络开发。
(function(document) {
const markers = [...document.querySelectorAll('mark')];
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
entry.target.style.animationPlayState = 'running';
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.8,
});
markers.forEach((mark) => {
observer.observe(mark);
});
}(document));
.mark {
--color1: springgreen;
--color2: springgreen;
--bg-height: 40%;
all: unset;
background-image: linear-gradient(var(--color1) var(--color2));
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0 var(--bg-height);
-webkit-animation: highlight 800ms 1 ease-out;
animation: highlight 800ms 1 ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}
@keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}
<main>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat quas asperiores ut numquam, quidem blanditiis sint explicabo qui amet reiciendis doloremque, minima illo. Repudiandae iste quis nihil itaque porro.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut aut laudantium ullam! <mark>Tempore sapiente molestiae</mark> nam amet quaerat quisquam doloremque eveniet dolores? Laborum asperiores, obcaecati minima minus qui esse ab?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sapiente ea alias unde qui mollitia earum pariatur nesciunt incidunt, <mark>tenetur nemo iure aspernatur maiores.</mark> Laboriosam placeat quae eos recusandae explicabo?</p>
</main>
JS 代码是正确的,您在 CSS 代码中只有 2 个错误,您在 linear-gradient
声明中遗漏了一个逗号,并且您正在设计 .mark
class,而您需要设置 mark
元素的样式:
const markers = [...document.querySelectorAll('mark')];
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
entry.target.style.animationPlayState = 'running';
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.8,
});
markers.forEach((mark) => {
observer.observe(mark);
});
p,
h2 {
margin-bottom: 500px;
}
mark {
--color1: springgreen;
--color2: blue;
--bg-height: 40%;
all: unset;
background-image: linear-gradient(var(--color1), var(--color2));
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: 0% var(--bg-height);
animation: highlight 800ms 1 ease-out;
animation-fill-mode: forwards;
animation-play-state: paused;
}
@-webkit-keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}
@keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}
<main>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat quas asperiores ut numquam, quidem blanditiis sint explicabo qui amet reiciendis doloremque, minima illo. Repudiandae iste quis nihil itaque porro.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut aut laudantium ullam! <mark>Tempore sapiente molestiae</mark> nam amet quaerat quisquam doloremque eveniet dolores? Laborum asperiores, obcaecati minima minus qui esse ab?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sapiente ea alias unde qui mollitia earum pariatur nesciunt incidunt, <mark>tenetur nemo iure aspernatur maiores.</mark> Laboriosam placeat quae eos recusandae explicabo?</p>
</main>
如果您想要对滚动事件进行更精细的控制,例如您可能想要恢复动画、添加其他行为(如交错等)...我建议您尝试 GSAP ScrollTrigger 插件,它比直接操作 css 和 Intersection Observer 更容易。
我试图在页面滚动时突出显示文本,它被标记在下方,根据我在网上找到的内容,代码如下所示。但似乎我做错了什么,我无法做对。 请注意我是新手,刚开始学习网络开发。
(function(document) {
const markers = [...document.querySelectorAll('mark')];
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
entry.target.style.animationPlayState = 'running';
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.8,
});
markers.forEach((mark) => {
observer.observe(mark);
});
}(document));
.mark {
--color1: springgreen;
--color2: springgreen;
--bg-height: 40%;
all: unset;
background-image: linear-gradient(var(--color1) var(--color2));
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0 var(--bg-height);
-webkit-animation: highlight 800ms 1 ease-out;
animation: highlight 800ms 1 ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}
@keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}
<main>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat quas asperiores ut numquam, quidem blanditiis sint explicabo qui amet reiciendis doloremque, minima illo. Repudiandae iste quis nihil itaque porro.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut aut laudantium ullam! <mark>Tempore sapiente molestiae</mark> nam amet quaerat quisquam doloremque eveniet dolores? Laborum asperiores, obcaecati minima minus qui esse ab?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sapiente ea alias unde qui mollitia earum pariatur nesciunt incidunt, <mark>tenetur nemo iure aspernatur maiores.</mark> Laboriosam placeat quae eos recusandae explicabo?</p>
</main>
JS 代码是正确的,您在 CSS 代码中只有 2 个错误,您在 linear-gradient
声明中遗漏了一个逗号,并且您正在设计 .mark
class,而您需要设置 mark
元素的样式:
const markers = [...document.querySelectorAll('mark')];
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
entry.target.style.animationPlayState = 'running';
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.8,
});
markers.forEach((mark) => {
observer.observe(mark);
});
p,
h2 {
margin-bottom: 500px;
}
mark {
--color1: springgreen;
--color2: blue;
--bg-height: 40%;
all: unset;
background-image: linear-gradient(var(--color1), var(--color2));
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: 0% var(--bg-height);
animation: highlight 800ms 1 ease-out;
animation-fill-mode: forwards;
animation-play-state: paused;
}
@-webkit-keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}
@keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}
<main>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat quas asperiores ut numquam, quidem blanditiis sint explicabo qui amet reiciendis doloremque, minima illo. Repudiandae iste quis nihil itaque porro.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut aut laudantium ullam! <mark>Tempore sapiente molestiae</mark> nam amet quaerat quisquam doloremque eveniet dolores? Laborum asperiores, obcaecati minima minus qui esse ab?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sapiente ea alias unde qui mollitia earum pariatur nesciunt incidunt, <mark>tenetur nemo iure aspernatur maiores.</mark> Laboriosam placeat quae eos recusandae explicabo?</p>
</main>
如果您想要对滚动事件进行更精细的控制,例如您可能想要恢复动画、添加其他行为(如交错等)...我建议您尝试 GSAP ScrollTrigger 插件,它比直接操作 css 和 Intersection Observer 更容易。