jQuery Plugin To Improve Text Reading Speed - Fast Reader

Fast Reader is a funny jQuery plugin used to improve the reading speed of your web content by showing the words one by one in a reader overlay.

Basic usage:

1. Put jQuery library and the jQuery fast reader plugin into your html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.fast-reader.js"></script>

2. Include the Font Awesome for the reader icons.

<link href="font-awesome.min.css" rel="stylesheet">

3. Call the function on the target text wrapper to active the plugin.

$("#text").fastreader();

4. The default CSS styles for the reader overlay.

div#fast-reader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;
}

#fast-reader {
  height: 120px;
  background: rgba(255,249,235,0.8);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid rgb(255,249,235);
  border-left: none;
  border-right: none;
  text-align: center;
  font-family: 'Droid Sans Mono', sans-serif;
  font-size: 48px;
  line-height: 110px;
  margin: auto;
}

#fast-reader-text {
  border: 3px solid #A8A7A7;
  border-left: none;
  border-right: none;
  padding-bottom: 10px;
}

#fast-reader-text .fast-reader-pivot { color: red; }

#fast-reader-text .invisible { visibility: hidden; }

#fast-reader-buttons {
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
}

#fast-reader-buttons a {
  margin-left: 10px;
  color: gray;
}

5. Default plugin options.

$("#text").fastreader({

  // text color
  color: "black",

  // auto play
  autoplay: false,

  // ready text
  readyText: "Prepared",

  // reading speed
  wpm: 300
  
});

Change log:

2015-12-25

• New release.

---

This awesome jQuery plugin is developed by frikinside. For more Advanced Usages, please check the demo page or visit the official website.