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> |
あとは任意のテキストを交差ポイントに指定すれば完成です。
