Press "Enter" to skip to content

jQuery Plugin Highlights Text With Marker Animation

JQuery plugin to create tag animation that gradually highlights selected text as it becomes visible in the viewport and to add an underline animation like a highlighter.

How to make use of it:

1. Install & download the jQuery Marker Animation plugin.

# NPM
$ npm install jquery.marker-animation --save

2. Import the jQuery Marker Animation plugin into the doc.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- From Dist Folder -->
<script src="/path/to/build/index.js"></script>
<!-- Or From CDN -->
<script src="https://cdn.jsdelivr.net/npm/jquery.marker-animation/build/index.min.js"></script>

3. Call the function markerAnimation on the target text you need to highlight.

<p>
  Vestibulum augue lectus, aliquam tincidunt accumsan a, <span class="marker-animation">iaculis nec tellus. Quisque non interdum turpis</span>. Nunc interdum, nibh non laoreet egestas, urna odio lobortis ex, sit amet dignissim nunc nulla at lectus. Morbi a maximus erat. Fusce fermentum ornare faucibus. In lorem lectus, rhoncus vel arcu id, aliquam dignissim nibh. Nulla vestibulum, metus quis finibus tincidunt, metus purus congue odio, quis pretium orci lectus eget massa. Vivamus eu nibh risus. Proin aliquet maximus hendrerit. Donec tristique ex velit, non consequat ligula feugiat nec. Aenean lacinia sit amet augue vitae vehicula. Ut quis mauris varius, molestie eros convallis, vulputate leo. Nam enim augue, maximus id ante ut, rutrum gravida orci. Duis tincidunt pretium venenatis.
</p>
$(function(){

  $('.marker-animation').markerAnimation();

});

4. Customize the appearance of the highlighted text.

$('.marker-animation').markerAnimation({

  // background color
  "color": '#fe9',

  // position
  'padding_bottom': '.1em',

  // thickness
  "thickness": '.6em',
  
  // font weight
  "font_weight": 'bold',

  // enabled stripes
  'stripe': false,
  'stripe_thickness': 2
  
});

5. Customize the marker animation.

$('.marker-animation').markerAnimation({

  // delay
  "delay": '.1s',

  // duration
  "duration": '2s',

  // easing function
  "function": 'ease',
  
  // whether to repeat the animation
  "repeat": false,

  cssFilter: function( css ) {
    return css;
  },

});

Highlight Text Within An Article, jquery highlight text, Marker Animation Plugin/Github


See Demo And Download

Official Website(technote-space): Click Here

This superior jQuery/javascript plugin is developed by technote-space. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *