Do you want a line of text to stand out with animated effects, but don’t want to open up Photoshop to create an animated GIF? Highlight text easily with the Art Text Light plugin.
Most jQuery text animation effects only occur when you hover over text, or some require customization to get the animation to loop continuously upon load. This one loops automatically, requiring little to no customization. All you really need to do is load the script into your page and initialize the script with your custom parameters if needed.
To be honest, I didn’t see the effect when I first used the syntax from the demo. However, adding in $(document)ready got it starting up just fine:
<script type="text/javascript">
$(document).ready(function() {
$('#highlight').artTextLight({highlightInterval: 3000, css1: {'color': '#FFF'}, css2: {'color': '#050568'}});
});
</script>
Super easy, and I didn’t have to create an animated GIF for a simple text highlight, which means I can easily customize the text whenever I want and not have to create more GIFs.
Edit: If you need to apply this effect to a text link, you can’t wrap the text with the link; the link has to be separate with the appropriate CSS to make the link a block-level item (display: block, position: absolute or relative, width and height, etc.) IE doesn’t like empty links that are positioned absolutely, so you need to apply a background with a transparent GIF to the link item.
