ALighter, a jQuery CSS3 Animated Highlighter
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
- Without options
- Manually triggered ALighter
- Manually triggered and chosen ALighter
- 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 torelative
, and itsoverflow
property tohidden
Download
- ALighter 1.0 (01/22/2012): jquery.alighter.1.0.zip