Simple User Message with Dynamic Reading Speed

Here’s a quick user message, which uses jQuery to fade in, pause and then fade out. The clever bit is that it works out how long to display the message based on its length.

The JavaScript function takes a string parameter. The script does a word count by splitting the string on spaces and hyphens using Regex. The word count is then multiplied by 330 milliseconds to produce a delay roughly based on an average reading speed of 200-230 words per minute. The string is added to the <div>, animated with the readingTime delay before finally being emptied ready for the next message.

See the Pen User Message with Dynamic Delay by Chris Smith (@chris22smith) on CodePen

About Chris Smith

Web developer specialising in frontend UI design @chris22smith
This entry was posted in box-shadow, delay(), jQuery, Math.ceil, Regex and tagged , , , , , . Bookmark the permalink.