Philippe Masset

Engineer at Buffer.

ALighter, a jQuery CSS3 Animated Highlighter

jQuery.alighter preview

ALighter is a highly customizable jQuery plugin that creates a CSS3 animated highlighter.

  • Customizable animation (speed and easing function)
  • Customizable effect (color, opacity, circle size and blur)
  • Customizable timer (custom duration or disableable)

Live examples

  1. Without options
  2. Manually triggered ALighter
  3. Manually triggered and chosen ALighter
  4. Using ALighter events

Basic usage

HTML:

<div>
    Lorem <span class="toALight">ipsum</span> dolor sit amet, consectetur <span class="toALight">adipisicing elit</span>
</div>

JavaScript:

$("div").alighter();

ALighter options

selector (string, default: '.toALight')

Selector matching children of the element on which we called .alighter(), that will be highlighted.

If you keep the default value, you'll have to add the class .toALight to elements you want to see highlighted.

color (string, default: '#000')

That's the color of the highlighter. Every CSS color can be used (hexadecimal, color names...).

opacity (number, default: 0.1)

Opacity of the highlighter. Ranging from 0 to 1. The higher it is, the less other elements than the highlighted one are visible.

Note: A rendering engine weirdness makes the ALighter look bad when the value is close to 1.

shadowBlurSize (number, default: 15)

Defines the size of the blur effect applied to the ALighter. Just play with it, you'll see.

circlePadding (number, default: 15)

Padding around highlighted elements. Will likely have to be adjusted if you set a custom shadowBlurSize.

animationDuration (number, default: 1000)

That's the duration of the animation between two highlighted elements, in milliseconds. To disable the animation, just set animationDuration to 0.

animationEasing (string, default: 'swing')

Easing function used for the animation. If you're not using jQuery UI, only two are available: 'swing' and 'linear'.

timer (number, default: 2000)

Time spent highlighting each element, in milliseconds.

By setting timer to 0, you will disable it: you'll have to trigger the ALighter manually (see below).

If you want to jump from one element to another without waiting or having to manually trigger the thing, set timer to 1. I doubt the human eye can perceive something like a 1 millisecond pause.

ALighter events

Please note that these events are within the alighter namespace. Don't forget it, or it won't work.

Also, if you disable animations (by setting animationDuration to 0), know that these events will be triggered anyway.

animationStart.alighter

Triggered when the ALighter starts being animated from one element to another.

animationStop.alighter

Triggered when the ALighter has reached an element.

ALighter methods

ALighting the next element

When automatic highlighting is disabled (by setting timer to 0), use the alight() function to manually trigger the ALighter:

$(".paragraph").alighter({
    timer: 0
});

$("button").bind("click", function(){
    $(".paragraph").data("alightData").alight();
});

You can have a look at Live example #2 at the top of the page for a demo.

ALighting a chosen element

You can also pass the index of the element you wish to highlight to alight():

$(".paragraph").data("alightData").alight(2);

See Live example #3 at the top of the page for a more in-depth use case.

Notes

  • ALighter makes use of jQuery.proxy, thus needs jQuery 1.4+
  • ALighter adds some CSS properties to the element on which it's called: it changes its position property to relative, and its overflow property to hidden

Download