| [ Web Proxy ] |
| Viewing: https://roughnotation.com/ | [Back] [Original] |
A small JavaScript library to create and animate annotations on a web page
Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.
Rough Notation is 3.8kb in size when gzipped, and the code is available on GitHub.
Following are the different styles of annotations. Hit the annotate button in each section to see the animated annotation
Create a sketchy underline below an element.
annotate
This style draws a box around the element.
annotate
Draw a circle around the element.
annotate
Creates a highlight effect as if marked by a highlighter.
annotate
Draw a hand-drawn line through an element creating a stroke-through effect.
annotate
To symbolize rejection, use a crossed-off effect on an element.
annotate
Create a hand-drawn bracket around a block (like a paragraph of text) on one or multiple sides of the block.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus. Phasellus purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl, placerat molestie mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros consequat, sit amet placerat massa vulputate.
annotate
Ability to annotate inline content that can span multiple lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus. Phasellus purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl, placerat molestie mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros consequat, sit amet placerat massa vulputate. Maecenas euismod volutpat ultrices. Pellentesque felis ex, ullamcorper in felis finibus, feugiat dignissim augue. Integer malesuada non eros consectetur interdum. Mauris mollis non urna in porta.
annotate
Rough Notation provides a way to order the animation of annotations by creating an annotation-group. Pass the list of annotations to create a group. When show is called on the group, the annotations are animated in order.
annotate
Various properties of the annotation can be configured, like color, strokeWidth, animation duration.
annotate
Of course you don't have to animate the annotation, it just shows up when show is called.
annotate
| Web Proxy Viewer | New URL | Original Page |