traceit: Trace the Page Elements

This plugin might be the most fun you’ve had all day; traceit allows you to trace page elements. You can draw arrows or rings or animated bits around images to provide users with a visual cue as to what they are supposed to do or where they are supposed to look on the screen.

The example is a great way to showcase the application of traceit. In the preview are diagrams of cat tails and in the sidebar are specific actions. If you click an action name, the appropriate tail image is circled so you can match action and visual.

Now that you know this is the right plugin for your project, download and include the script and its dependencies in your code. Select the traceable element and call the animation. That’s it!

You can create customizations as well for almost any aspect of the plugin. Change the color, stroke with, opacity, full, gap point and more as best suits your overall design. And just like magic use of the ESC key or changing the browser size will rest everything back to the start. It does not get much easier than this to use a plugin.