jQuery Plugin To Highlight Specific Part Of A Webpage - Hop

Hop is a small jQuery plugin that displays a circle with a fullscreen overlay to highlight specific part(s) of your webpage as you seen on Google Inbox. Fully customizable and supports highlighting sequence and custom animations.

Basic usage:

1. Include both jQuery library and the jQuery Hop.js plugin and we're ready to go.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="src/hop.js"></script>

2. Apply the highlight effect to a specific element.

$('.el').hop({
  // options here
});

3. Apply the highlight effect to a sequence of elements.

var $el = $('.footer a').hop();

setTimeout(function() {
  $el.data('hop').move(100, 0, true);
}, 2000);

setTimeout(function() {
  // move to the top right of the page
  $el.hop({color:'#E91E63', radius: 400, borderColor: '#fff', borderWidth: 10}).data('hop').move('90%', 100, false);
}, 4000);

setTimeout(function() {
  // move to the 2nd button
  $('button:eq(1)').hop({radius: 150, color: '#fb8c00', borderColor: '#000'})                                
}, 6000);

setTimeout(function() {
  $('.logo').hop({radius: 250, color: '#ffc107'});
}, 8000);

4. Make the highlight effect follow the cursor.

$('.el').hop({
  color: '#ffc107',
  radius: 200,
  adjustLeft: -20
});

$(document).mousemove(function(event) {
  var $element = $('.hop-outer');
  var left = event.pageX - ($element.width() / 2)
  var top = event.pageY - ($element.height() / 2);
   $('.el').data('hop').move(left, top);
});

5. Remove the highlight effect.

$('.el').data('hop').remove();

6. Default options which can be used to customize the highlight effect.

$('.el').hop({
  borderColor: '#fff',
  color: '#388E3C',
  radius: 100,
  borderWidth: 2,
  opacity: 0.8,
  adjustLeft: 0,
  adjustTop: 0
});

Change log:

2016-10-27

• fix box-sizing bug

---

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