Marker-Pen Animation for Highlighted Text
Animates highlighted text (the <mark> tag from the toolbar's Highlight option) with a marker stroke that sweeps across as the words scroll into view.
Opens WPIDE on
Code
<style>
.entry-content mark,.wp-block-post-content mark{--wpide-mark:#fde68a;background:linear-gradient(var(--wpide-mark),var(--wpide-mark)) no-repeat 0 85%/100% 45%;color:inherit;padding:0 .1em;}
@media (prefers-reduced-motion:no-preference){.wpide-mark-pending{background-size:0 45%!important;}.wpide-mark-animate{transition:background-size .8s ease;}}
</style>
<script>
(function () {
var marks = document.querySelectorAll('.entry-content mark, .wp-block-post-content mark');
if (!marks.length || !('IntersectionObserver' in window)) { return; }
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return; }
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) { io.unobserve(entry.target); entry.target.classList.remove('wpide-mark-pending'); }
});
}, { threshold: 1 });
marks.forEach(function (m) {
if (m.style.backgroundColor) { return; }
m.classList.add('wpide-mark-pending', 'wpide-mark-animate');
io.observe(m);
});
})();
</script>Notes
Change the marker color in --wpide-mark. Visitors who prefer reduced motion see the highlight without animation.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.