jQuery Highlight Text in div with Marker Animation

Category: | September 13, 2019
Author: Technote Space
Official Page: Go to Website
Last Update: September 14, 2019
License: MIT
jQuery Highlight Text in div with Marker Animation

This simple jQuery plugin helps you to highlight text in div element by using maker animation. It searches the paragraph in the elements and highlights them.

Basically, the plugin work in a way so when the user scrolls down the page it automatically highlights important paragraph in different colors. You can easily highlight single words, paragraphs, alphabets or text lines with custom code.

Furthermore, the plugin also has the option to manage the marker thickness, drawing speed, delay, and font-weight of highlighted text.

By using the simple class marker_animation on any HTML element you can easily implement highlight color over the text.

In addition, the plugin supports the data attribute which allows you to easily customize it. It’s a cool and nice plugin which make your work easy and super fast. You don’t need to write all the code from the start.

How to Use Plugin to Highlight div Text

The use of the plugin is very easy. You can get started by adding the jQuery and Animation Marker files before closing the <head> tag 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>

After that, you can create simple markup. You can create a div and place some text. To highlight the part of a sentence or words, you need to add a span tag with a class name highlighted.

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>

Let’s say we want to change the color of text and highlight into red color then the HTML code will like:

Hello, Dolly <span class="marker-animation" data-ma_color="red">Well, hello, Dolly</span> Hello, Dolly

You can easily apply multiple options by using data-attributes as following:

Hello, Dolly <span class="marker-animation" data-ma_repeat="true" data-ma_font_weight="null" data-ma_delay="2s">Well, hello, Dolly</span> Hello, Dolly

The Javascript

But remember you need to initialize the jQuery function by using the document ready and define that class name with markerAnimation function

$(document).ready(function(){

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

});

Configuration Options

The marker plugin gives you a lot of configuration options which make your job easy. You can simply apply them to get the desired result.

Here is a list of its options which you can set.

Option Description, Default, Type
color This option is useful to set the 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 the characters. Default: “bold”, Type: String.

$('.highlighted').markerAnimation({
   font_weight: "bold",
});
repeat Decide whether to repeat the marker animation. Default: false, Type: Boolean.

$('.highlighted').markerAnimation({
   repeat: true,
});
stripe Decide whether to make it stripe design. Default: false, Type: Boolean.

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

That’s all you need to do.

 

You May Also Like