A free jQuery Plugins is helps you to highlight text in div element by using marker-animation. It searches the any text of paragraph and highlights them. when the user scrolls down the page it automatically highlights important paragraph in different-different colors. it support with WordPress also. You can easily highlight single words, paragraphs, alphabets or text lines with custom code. By using the simple class marker_animation on any HTML element you can easily implement highlight color over the text.
Table of Contents
How to use it:
Add jQuery script and Animation script library.
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Marker Animation JS -->
<script src="js/jquery.marker-animation.min.js"></script>
The plugin will dynamically highlight the text with smooth animation and color.
<div class="content">
Hello World! <span class="highlighted"> frontendscript.com</span> list the best jQuery plugins, code, and script which allow you to make sure develpement work super fast and easy.
</div>
Add jQuery script for highlight.
$(document).ready(function(){
$('.highlighted').markerAnimation();
});
Other All Scripts
for colors
$('.marker-animation').markerAnimation({
color: '#fe9'
});
Set the thickness of line
$('.marker-animation').markerAnimation({
thickness: '.6em'
});
Set the time to complete drawing a line
$('.marker-animation').markerAnimation({
duration: '2s'
});
Set the time to start drawing a line
$('.marker-animation').markerAnimation({
duration: '.1s'
});
Set the thickness of characters
$('.marker-animation').markerAnimation({
font_weight: 'bold'
});
Set whether to repeat the animation
$('.marker-animation').markerAnimation({
repeat: false
});
Set whether to make it stripe design
$('.marker-animation').markerAnimation({
stripe: false
});
Done
Thanks for make jQuery plugin is developed by technote-space For more Helpfull for users, please check the demo page or visit the official website.
