Spritz V2

Source http://codepen.io/pouretrebelle/pen/reGKw

HTML

<div id="spritz" class="spritz">
  <div id="spritz_word" class="spritz-word"></div>
</div>
<div class="settings">
  <div class="controls settings-controls"><span class="speed"><a id="spritz_slower" href="#" title="Slow Down" class="slower entypo-fast-backward"></a>
      <input id="spritz_wpm" type="number" value="300" step="50" min="50" class="wpm"/><a id="spritz_faster" href="#" title="Speed Up" class="faster entypo-fast-forward"></a></span><a id="spritz_save" href="#" title="Save" class="save entypo-save"></a><span class="interaction"><a id="spritz_back" href="#" title="Jog Back" class="back entypo-left-open"></a><a id="spritz_pause" href="#" title="Pause/Play" class="pause entypo-pause"></a><a id="spritz_forward" href="#" title="Jog Forward" class="forward entypo-right-open"></a></span></div>
  <div class="controls extra-controls">
    <div class="togglable closed">
      <div class="zoom"><a id="spritz_smaller" href="#" title="Smaller" class="smaller entypo-minus"></a><span href="#" title="Smaller" class="entypo-search"></span><a id="spritz_bigger" href="#" title="Bigger" class="bigger entypo-plus"></a></div>
      <div class="autosave">
        <input id="autosave_checkbox" type="checkbox" class="checkbox"/>
        <label id="spritz_autosave" for="autosave_checkbox" class="checkbox-label entypo-cancel">auto-save on pause</label>
      </div>
    </div><a href="#" title="Extra Controls" class="toggle entypo-dot-3"></a>
  </div>
  <div class="words">
    <div class="controls words-controls"><a id="spritz_select" href="#" title="Select All" class="select entypo-doc-text"></a><a id="spritz_refresh" href="#" title="Refresh Text" class="refresh entypo-cycle"></a><a id="spritz_expand" href="#" title="Text Area Resize" class="expand entypo-resize-full"></a></div>
    <div id="spritz_progress" class="progress-bar"></div>
    <textarea id="spritz_words" class="demo-words">
      Spritz
      This is a jQuery implementation of Spritz technology.
      Reading is...

CSS

.spritz {
  position: relative;
  max-width: 30rem;
  padding: 1rem 0 1.2rem;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  margin: 10rem auto;
  font-size: 1em;
}
.spritz:before, .spritz:after {
  content: "";
  position: absolute;
  left: 40%;
  height: 0.8rem;
  width: 2px;
  margin-left: -1px;
  background-color: black;
}
.night .spritz {
  border-color: #555555;
}
.night .spritz:before, .night .spritz:after {
  background-color: #555555;
}
.spritz:before {
  top: 0;
}
.spritz:after {
  bottom: 0;
}

.spritz-word {
  font-size: 1.6em;
  line-height: 1.6em;
  height: 1.7em;
  font-weight: 600;
  color: black;
}
.night .spritz-word {
  color: #bbbbbb;
}
.spritz-word div {
  display: table-cell;
}
.spritz-word div:first-child {
  width: 40%;
  text-align: right;
}
.spritz-word div:nth-child(2) {
  color: #e60000;
}
.night .spritz-word div:nth-child(2) {
  color: #ff4d4d;
}
.spritz-word div:last-child {
  width: 60%;
  text-align: left;
}

.controls {
  text-align: center;
}
.controls:after {
  content: "";
  display: table;
  clear: both;
}
.controls a {
  display: inline-block;
  vertical-align: bottom;
  color: #aaaaaa;
  text-decoration: none;
  transition: color 150ms linear;
}
.controls a:hover, .controls a.active {
  color: #777777;
}
.night .controls a {
  color: #444444;
}
.night .controls a:hover, .night .controls a.active {
  color: #999999;
}

.settings input, .settings textarea, .settings button {
  box-sizing: border-box;
  border: 0;
  color: black;
  background: transparent;
}
.night .settings input, .night .settings textarea, .night .settings button {
  color: #888888;
}
.settings input:focus, .settings textarea:focus, .settings button:focus {
  outline: none;
}

.settings-controls {
  max-width: 30rem;
  margin: 0 auto;
}
.settings-controls .speed {
  float: left;
}
.settings-controls .interaction {
  float: right;
}
.settings-controls a {
  font-size: 3rem;
  line-height: 4rem;
}
.settings-controls .save {
  transition:...

JavaScript

/*
Spritz Speed Reader by Charlotte Dann
local storage implementation by Keith Wyland
*/


var $wpm = $('#spritz_wpm');
var interval = 60000/$wpm.val();  
var paused = false;
var $space = $('#spritz_word');
var i = 0;
var night = false;
var zoom = 1;
var autosave = false;
var $words = $('#spritz_words');
var local_spritz = {};

function words_load() {
  if (!localStorage.jqspritz) {
    words_set();
    word_show(0);
    word_update();
    spritz_pause(true);
  } else {
    local_spritz = JSON.parse(localStorage['jqspritz']);
    $words.val(local_spritz.words);
    i = local_spritz.word;
    if (local_spritz.night) {
      night = true
      $('html').addClass('night');
    };
    if (local_spritz.autosave) {
      autosave = true;
      $('html').addClass('autosave');
      $('#autosave_checkbox').prop('checked', true);
    };
    $wpm.val(local_spritz.wpm); 
    interval = 60000/local_spritz.wpm;
    spritz_zoom(0);
    words_set();
    word_show(i);
    word_update();
    spritz_pause(true);
    spritz_alert('loaded');
  }  
}
function words_save() {
  local_spritz = {
    word: i,
    words: $words.val(),
    wpm: $wpm.val(),
    night: night,
    autosave: autosave,
    zoom: zoom
  };
  localStorage['jqspritz'] = JSON.stringify(local_spritz);
  if (!autosave) {
    spritz_alert('saved');
  } else {
    button_flash('save', 500);
  }
}


/* TEXT PARSING */
function words_set() {
  words = $words.val().trim()
  .replace(/([-—])(\w)/g, '$1 $2')
  .replace(/[\r\n]/g, ' {linebreak} ')
  .replace(/[ \t]{2,}/g, ' ')
  .split(' ');
  for (var j = 1; j < words.length; j++) {
    words[j] = words[j].replace(/{linebreak}/g, '   ');
  }
}
/* ON EACH WORD */
function word_show(i) {
  $('#spritz_progress').width(100*i/words.length+'%');
  var word = words[i];
  var stop = Math.round((word.length+1)*0.4)-1;
  $space.html('<div>'+word.slice(0,stop)+'</div><div>'+word[stop]+'</div><div>'+word.slice(stop+1)+'</div>');
}
function word_next() {
  i++;
 ...