In classic whiteboard or flipchart presentations, keywords are often circled to underline their importance. This option of marking can now be transferred to web projects using the jQuery plugin „traceit.js“. Without much effort, chosen HTML elements can be marked with a circle that resembles the hand-drawn circles of whiteboard presentations. „traceit.js“ works especially well with tutorials as the important aspects can be marked very easily and efficiently. Integrating and Using Traceit.js To use „traceit.js“, both jQuery and the JavaScript-library „Raphaël“ need to be incorporated as the plug-in uses the SVG-drawing methods of „Raphaël“. Alternatively, there is also a combined JavaScript file that contains the plug-in as well as the „Raphaël“ library. Once the files are integrated, any content can be circled like this: <p><span id=”schlagwort”>Schlagworte</span> sollten immer auffallen.</p> In the example, the content of a „“-Element is circled. To do so, an ID is distributed and transferred to „traceit.js“ to use the plug-in on the content. $(“#schlagwort”).trace(); Default Encirclement The plug-in makes sure that the content is circled depending on its size. The encirclements are not restricted to text elements as „traceit.js“ can also be used on images. However, there can be problems when trying to circle multiple words that […]
Textures.js: SVG Textures in All Shapes and Colors
Adobe’s Snap.svg: Animations With HTML 5, Without Flash
Tiny Circleslider: Who Said Sliders Are Boring?
Lining.js: Controlling Text Lines per CSS Selector
Styling SVG with CSS: Capabilities and Limitations
JavaScript: Create Circular Navigation Menus With Wheelnav.js