jQuery Plugin To Highlight Any DOM Elements - revealElements.js

File Size: 10.8 KB
Views Total: 1239
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Highlight Any DOM Elements - revealElements.js

revealElements.js is a jQuery plugin that highlights any DOM elements and adds an overlay layer to the rest of the page. Helps you bring a visitor focus to the specific part of your web page.

See also:

How to use it:

1. Load jQuery library and the jQuery revealElements.js in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="revealElements.js"></script>

2. Add the CSS class reveal to any DOM element.

<p class="reveal">
  ...
</p>

3. Create a trigger to toggle the highlight effect.

<button class="toggle-button">Reveal</button>

4. Enable the plugin with default settings.

$('.toggle-button').click(function() {
  $.revealElements();			
});

5. All the default settings.

$.revealElements({

revealClass: '.reveal',
wrapperEl: 'body',
overlayIndex: 8,
overlayColor: '#000'

});

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