Auto Change Text CSS Rules On Scroll - jQuery Unobscure Text

Unobscure Text is a jQuery plugin which dynamically changes the text color when you scroll the webpage to a specific position. One use-case would be to invert the link color of your sticky nav when it is scrolled down and covers an image with the same color.

See also:

• jQuery Plugin To Change Text Color Based On Background Image - invertImgText.js

How to use it:

1. Add JQuery library and the jQuery Unobscure Text plugin to the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/js/jquery.unobscure.js"></script>

2. Assume you have a sticky header navigation and some images that have the same color:

<header>
  <nav>
    <ul id="menu">
      <li><a href="#">Menu One</a></li>
      <li><a href="#">Menu Two</a></li>
      <li><a href="#">Menu Three</a></li>
      <li><a href="#">Menu Four</a></li>
      <li><a href="#">Menu Five</a></li>
      <li><a href="#">Menu Six</a></li>
    </ul>
  </nav>
</header>

<section>
  <img src="1.jpg" alt="Image 1">
</section>

3. Initialize the plugin to change the text color to 'white' when you scroll down the webpage to the image section:

$('#menu a').unobscure({
  target: 'section img',
  textCss: 'color: #fff;'
});

 

---

This awesome jQuery plugin is developed by thdoan. For more Advanced Usages, please check the demo page or visit the official website.