jQuery Highlight Text in div with Marker Animation

The Marker Animation is fully functional animated text highlighted plugin for jQuery. This jQuery plugin highlight text in div ( or text anywhere in your page). You can easily highlight lines, paragraphs, single word or alphabet with your custom color. You can also set custom marker thickness, drawing speed, delay and font weight of highlighted text.

Furthermore, the plugin comes with multiple options to fully customize its working.

Plugin Overview

Plugin: Marker Animation
Author: Technote
Licence: MIT Licence
Published: September 12, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 6.23 KB

How to Use Plugin to Highlight div Text

1. First of all load jQuery and Marker Animation plugin’s JavaScript file into your HTML page.

<!-- 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>

2. Now create your div and place some text in it that you want to highlight dynamically with marker animation.

<div class="your-div">

   Hello World! <span class="highlighted"> Codehim </span> is best site to download awesome code and scripts. 

</div>

Tip: Wrap your text (or one word or alphabet) between <span class="highlighted"> </span> that you want to highlight.

3. Finally call the plugin with class="highlighted" selector to highlight div text.

$(document).ready(function(){

   $('.highlighted').markerAnimation();

});

Advance Configuration Options for Marker Animation (Highlight div text)

The following are some advance configuration jQuery plugin options to “highlight text in div”.

Option Description, Default, Type
color

This option is useful to set custom highlighted color. Default: “#ffee99”, Type: String.

Possible Value: Any valid HTML color code (in hex, rgb, hsv or hsl).

$('.highlighted').markerAnimation({
   color: "#e41b17",
});
thickness

Define the thcikness of line. Default: “0.6em”, Type: String | Number.

Possible Value: Pass value (in px or em) in this string.

$('.highlighted').markerAnimation({
   thickness: "12px",
});
duration

This option set the duration of line drawing animation. Default: “2s”, Type: String.

$('.highlighted').markerAnimation({
   duration: "2s",
});
delay

Set time of delay before line drawing starts. Default: “0.1s”, Type: String.

$('.highlighted').markerAnimation({
   delay: "2s",
});
font_weight

Set the thickness of characters. Default: “bold”, Type: String.

$('.highlighted').markerAnimation({
   font_weight: "bold",
});
repeat

Decide weather to repeat the marker animation. Default: false, Type: Boolean.

$('.highlighted').markerAnimation({
   repeat: true,
});
stripe

Decide weather to make it stripe design. Default: false, Type: Boolean.

$('.highlighted').markerAnimation({
   stripe: false,
});