jQuery Plugin To Diff Menu Text And Image Colors - Paralax Menu

Paralax Menu is a jQuery Plugin allows you to add spark to your sticky menus by gradually changing its link font colors whenever it reaches images or elements with image backgrounds.

See also:

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

How to use it:

1. Download and include the jQuery Paralax Menu's CSS and JS in your markup.

<link rel="stylesheet" href="css/jquery.paralaxmenu.css">
<script src="js/jquery.paralaxmenu.js"></script>

2. Create a sticky menu using the syntax below.

<!-- Brochure Menu -->
<div id="brochure-menu">
  <div id="sub-brochure-menu">
    <a href="kitchen">Menu</a>
    <a href="shopping">Shopping</a>
    <a href="music">Music</a>
    <a href="library">Library</a>
    <a href="location">Location</a>
    <a href="news-and-events">News & Events</a>
  </div>
</div>

3. Initiate the script by including the following JS snippets in your scripts.

$(document).ready(function() {
  $('#sub-brochure-menu').paralaxmenu({

    // the container div id/class where sticky menu is going to be placed
    container: '.page-content',

    // which elements should make menu link colors change.
    wrappers : ['img', 'div.bg-image']
  });
});

4. The '.page-container' is, as the names implies, the container of the page where are your elements will be (text, images etc.). The '#brochure-menu' markup for the sticky menu presented earlier needs to be placed immediately after opening tag so that it looks like this:

<div class="page-content">
  <!-- Brochure Menu -->
  <div id="brochure-menu">
      <div id="sub-brochure-menu">
        <a href="kitchen">Menu</a>
        <a href="shopping">Shopping</a>
        <a href="music">Music</a>
        <a href="library">Library</a>
        <a href="location">Location</a>
        <a href="news-and-events">News & Events</a>
      </div>
  </div>
  ...
</div>

---

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