Text Highlighter Animation jQuery Plugin – jquery-marker-animation

Text
File Size: 4.05 KB
Views Total: 331 views
Last Update:November 08, 2022
Publish Date: November 27, 2018
Official Website: Go to website
License: MIT
Plugin Author: technote-space
Demo    Download

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.

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.
List Of Version :
  • v1.5.21
  • v1.5.20
  • v1.5.19
  • v1.5.18
  • v1.5.17
  • v1.5.16
  • v1.5.15
  • v1.5.14
  • v1.5.13
  • v1.5.12
  • v1.5.11
  • v1.5.10
  • v1.5.9
  • v1.5.8
  • v1.5.7
  • v1.5.6
  • v1.5.5
  • v1.5.4
  • v1.5.3
  • v1.5.2
  • v1.5.1
  • v1.5.0
  • v1.4.30
  • v1.4.29
  • v1.4.28
  • v1.4.27
  • v1.4.26
  • v1.4.25
  • v1.4.24
  • v1.4.23

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

You Might Also Like