jQuery Plugin To Highlight Specific Part Of A Webpage - Hop
File Size: | 26.9 KB |
---|---|
Views Total: | 673 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.