2020年09月6日(日)

スクロールに応じて任意のテキストにアニメーションしながらハイライト

• 0
• 1
• 17
• 21

Result

See the Pen Mark text effect on scroll w/ IO by kachibito
(@kachibito) on CodePen.

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

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

Ads

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