Progressively Highlight Text Within An Article - jQuery Marker Animation

Progressively Highlight Text Within An Article - jQuery Marker Animation
File Size: 74.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A jQuery plugin for creating marker animations that progressively highlight specified text when they become visible within the viewport.

Licensed under the GPL-3.0.

See also:

How to use 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 document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery.marker-animation.min.js"></script>

3. Call the function markerAnimation on the target text you want to highlight. That's it.

<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'
  
});

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

});

Changelog:

2018-12-07

  • delete: position_bottom option

2018-12-06

  • v1.2.1: Bugfix

2018-12-03

  • v1.1.2: Bugfix

2018-12-01

  • Bugfix

This awesome jQuery plugin is developed by technote-space. For more Advanced Usages, please check the demo page or visit the official website.