Highlight Text on Scroll with JavaScript – 5-Min Setup

Most blog content just sits there. 👋 Static words on a static page and your readers are already halfway to the back button before they even finish your first paragraph. I built a little JavaScript snippet that highlights on scroll and honestly it made a noticeable difference in how people interact with my pages. If you've been looking for ways to make your content more engaging, this one's a winner. 😊

The best part? "Now this is super plug and play. You don't have to do anything at all really. Just copy my code." That's it. No coding degree, no hiring a developer, no sitting through a 45-minute tutorial where the guy spends 20 minutes talking about his setup. Five minutes, tops. ⚡

TL;DR

Why Your Blog Content Feels Dead (And What This Fixes)

Here's the problem nobody talks about: you spend hours writing a 2,000-word blog post, optimize it for SEO, add images, and then someone lands on it and… nothing happens. There's no movement, no visual feedback—nothing telling the reader's brain to keep going.

That's what this on-scroll text effect solves. As visitors scroll, bolded text gets highlighted with a smooth pen-like animation that starts fast, slows down in the middle, then speeds up again—just like a real highlighter. Honestly kind of satisfying to watch.

It works on a psychological level: when something moves, your brain notices. It's not obnoxious like a pop-up; it's subtle—a gentle nudge to keep scrolling. These micro-interactions are often overlooked while people chase bigger, flashier things.

Fun Fact

The effect uses the IntersectionObserver API to detect visibility efficiently—far more performant than old scroll handlers, so it won't drag your site speed.

What the Dynamic Text Highlighting Actually Looks Like

As a paragraph comes into view, its bolded words and phrases get a colored sweep with pen-like easing that feels natural and precise.

One smart detail: the highlighting skips bullet points and lists on purpose. If everything animates, it stops being engaging and starts being annoying—subtlety keeps it classy.

The effect only triggers on <strong> or <b> tags inside <p> tags. That means you're already controlling the targets as you write—no extra markup required.

How to Add Custom JavaScript to WordPress (The 5-Minute Setup)

Step 1: Get the Code

Go to Yerain Abreu's tutorial and copy the full snippet—no edits or keys needed. "I'm sharing the link; just copy and paste it to your website."

No modifications, no setup—just copy it and you're done.

Step 2: Install the WPCode Plugin

In WordPress, go to Plugins → Add New → WPCode and install "WPCode – Insert Headers and Footers + Custom Code Snippets" (blue icon), then activate it.

It has over 2 million active installs and a strong rating—the standard way to add JS safely without touching theme files.

Step 3: Create Your Snippet

Go to Code Snippets → Add New → Add Your Custom Code (New Snippet).

Very important: choose JavaScript Snippet as the type (not HTML or PHP) or the code won't run—this trips people up.

Paste your code into the editor and save the snippet.

Step 4: Activate It (Don't Skip This)

After saving, find the toggle and activate the snippet. Then save again and check your site.

Critical Warning

Saving the snippet is NOT enough. WPCode defaults new snippets to Inactive—you must explicitly activate or the highlight effect will never appear.

Quick Setup Summary

1. Copy the code from yerainabreu.com
2. Install WPCode from the WordPress directory
3. Create a new snippet and choose "JavaScript Snippet"
4. Paste and activate (don't just save)

Customizing the Exclude List (So It Doesn't Highlight Everything)

The code includes an exclude list where you can add words or phrases that should not be highlighted.

Example: maybe your "Key Takeaways" line is a bolded paragraph that looks odd when animated—exclude that phrase to keep it static.

Edit the array directly in the snippet to add or remove terms; if you don't need exclusions, delete the section and you're done.

Will This Slow Down My Site?

Short answer: no. The snippet is tiny and relies on the browser's native IntersectionObserver—lightweight by design.

Your bigger risks are unoptimized images, too many plugins, or weak hosting. As r/webdev discussions note, small, purpose-built scripts have negligible impact.

Why WPCode Instead of Editing Theme Files Directly

Yes, you can paste code into header.php or functions.php—but you absolutely shouldn't.

One typo in PHP can crash your site; WPCode can auto-deactivate bad snippets so your site stays up. Plus, code in theme files gets wiped by updates.

This is standard WordPress best practice—use a snippets plugin for safety and persistence.

Safety Net

WPCode provides a safer workflow: isolate snippets, prevent fatals, and keep customizations through theme updates.

Does This Actually Increase Reader Engagement?

No perfect A/B test here, but the principle stands: subtle, purposeful animation helps guide the eye and keep readers engaged.

Signals like dwell time and scroll depth may matter; anything that nudges readers forward is a win. This highlight effect sits firmly in the "useful, not flashy" category.

FAQ

Final Thoughts

You could over-engineer engagement—or copy one snippet into WPCode and have dynamic highlighting running before your coffee gets cold. Don't forget to activate the snippet, then watch your bold text come alive. 🤙