Result

スクロールするとテキストにアニメーションしながらハイライトする、というもの。

通常のハイライトよりも目を惹く印象です。コードはVanillaとなっています。

JavaScript

(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);

Intersection Observer APIで要素に交差したらイベントが発火するようになってます。

css

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

ハイライトのスタイリングです。

html

<p>経済面では、日本の株式上場企業の本社のほとんどが東京に集中し、（東京圏では）購買力平価（PPP）を基にしても東京都市圏のGDPは1兆5369億ドル（2014年）であり、<mark>世界的な経済都市であり、大消費地でもある。 </mark></p>

あとは任意のテキストを交差ポイントに指定すれば完成です。

via

Mark text effect on scroll w/ IO

[PR]