Rough Notation is a small JavaScript library to create and animate annotations on a web page.

This premium tutorial provides the steps to set up animated annotation (highlight, cross, circle, underline etc.) text on page load or as the text comes into view.

By default Rough Notation shows all the animated annotations on page load.

There could be times when your heading or other text is present below the fold and you want to bring focus to the text when the user has just finished scrolling past that element. We can achieve this using JavaScript's Intersection Observer API. This tutorial covers two variations using Intersection Observer - annotation animation triggering only once when the element enters the viewport and triggering on and off when scrolling down and back up.

Getting Started

Create a test Page, edit it with Oxygen and add a Heading and a Text component inside a Section.

Next let us load Rough Notation on this Page.

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

Upload rough-notation.iife.js to the plugin's assets/js directory.

Create a file named say, rough-notation-init.js in the same location having the following sample code:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: