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: January 17, 2024
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,
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...