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.
$('.highlighted').markerAnimation({
color: "#e41b17",
});
|
thickness |
Define the thcikness of line. Default: “0.6em”, Type: String | Number.
$('.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,
});
|
Similar Code Snippets:
Animated Text Slider Using JavaScript
Form Validation in JavaScript Code
10+ CSS Text Shadow Neon Effect
JavaScript Search in Array Of Objects
Contact Us Page Template With Dark Mode
HTML File Upload CSS Style
Live Markdown Editor With Preview Using Codemirror JS
Increment and Decrement Counter in JavaScript
JavaScript Copy to Clipboard Button
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.