| .spritz#spritz | |
| .spritz-word#spritz_word | |
| .settings | |
| .controls.settings-controls | |
| span.speed | |
| a.slower.entypo-fast-backward#spritz_slower(href="#" title="Slow Down") | |
| input.wpm#spritz_wpm(type="number" value="300" step="50" min="50") | |
| a.faster.entypo-fast-forward#spritz_faster(href="#" title="Speed Up") | |
| a.save.entypo-save#spritz_save(href="#" title="Save") | |
| span.interaction | |
| a.back.entypo-left-open#spritz_back(href="#" title="Jog Back") | |
| a.pause.entypo-pause#spritz_pause(href="#" title="Pause/Play") | |
| a.forward.entypo-right-open#spritz_forward(href="#" title="Jog Forward") | |
| .controls.extra-controls | |
| .togglable.closed | |
| .zoom | |
| a.smaller.entypo-minus#spritz_smaller(href="#" title="Smaller") | |
| span.entypo-search(href="#" title="Smaller") | |
| a.bigger.entypo-plus#spritz_bigger(href="#" title="Bigger") | |
| .autosave | |
| input.checkbox#autosave_checkbox(type="checkbox") | |
| label.checkbox-label.entypo-cancel#spritz_autosave(for="autosave_checkbox") auto-save on pause | |
| a.toggle.entypo-dot-3(href="#" title="Extra Controls") | |
| .words | |
| .controls.words-controls | |
| a.select.entypo-doc-text#spritz_select(href="#" title="Select All") | |
| a.refresh.entypo-cycle#spritz_refresh(href="#" title="Refresh Text") | |
| a.expand.entypo-resize-full#spritz_expand(href="#" title="Text Area Resize") | |
| .progress-bar#spritz_progress | |
| textarea.demo-words#spritz_words. | |
| Spritz | |
| This is a jQuery implementation of Spritz technology. | |
| Reading is inherently time consuming because your eyes have to move from word to word and line to line. Traditional reading also consumes huge amounts of physical space on a page or screen, which limits reading effectiveness on small displays. Scrolling, pinching, and resizing a reading area doesn’t fix the problem and only frustrates people. Now, with compact text streaming from Spritz, content can be streamed one word at a time, without forcing your eyes to spend time moving around the page. Spritz makes streaming your content easy and more comfortable, especially on small displays. Our “Redicle” technology enhances readability even more by using horizontal lines and hash marks to direct your eyes to the red letter in each word, so you can focus on the content that interests you. Best of all, Spritz’s patent-pending technology can integrate into photos, maps, videos, and websites to promote more effective communication. | |
| a.light(href="#" title="Change Theme") | |
| .alert#alert |
| /* | |
| 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++; | |
| word_show(i); | |
| } | |
| function word_prev() { | |
| i--; | |
| word_show(i); | |
| } | |
| /* ITERATION FUNCTION */ | |
| function word_update() { | |
| spritz = setInterval(function() { | |
| word_next(); | |
| if (i+1 == words.length) { | |
| setTimeout(function() { | |
| $space.html(''); | |
| spritz_pause(true); | |
| i = 0; | |
| word_show(0); | |
| }, interval); | |
| clearInterval(spritz); | |
| }; | |
| }, interval); | |
| } | |
| /* PAUSING FUNCTIONS */ | |
| function spritz_pause(ns) { | |
| if (!paused) { | |
| clearInterval(spritz); | |
| paused = true; | |
| $('html').addClass('paused'); | |
| if (autosave && !ns) { | |
| words_save(); | |
| }; | |
| } | |
| } | |
| function spritz_play() { | |
| word_update(); | |
| paused = false; | |
| $('html').removeClass('paused'); | |
| } | |
| function spritz_flip() { | |
| if (paused) { | |
| spritz_play(); | |
| } else { | |
| spritz_pause(); | |
| }; | |
| } | |
| /* SPEED FUNCTIONS */ | |
| function spritz_speed() { | |
| interval = 60000/$('#spritz_wpm').val(); | |
| if (!paused) { | |
| clearInterval(spritz); | |
| word_update(); | |
| }; | |
| $('#spritz_save').removeClass('saved loaded'); | |
| } | |
| function spritz_faster() { | |
| $('#spritz_wpm').val(parseInt($('#spritz_wpm').val())+50); | |
| spritz_speed(); | |
| } | |
| function spritz_slower() { | |
| if ($('#spritz_wpm').val() >= 100) { | |
| $('#spritz_wpm').val(parseInt($('#spritz_wpm').val())-50); | |
| } | |
| spritz_speed(); | |
| } | |
| /* JOG FUNCTIONS */ | |
| function spritz_back() { | |
| spritz_pause(); | |
| if (i >= 1) { | |
| word_prev(); | |
| }; | |
| } | |
| function spritz_forward() { | |
| spritz_pause(); | |
| if (i < words.length) { | |
| word_next(); | |
| }; | |
| } | |
| /* WORDS FUNCTIONS */ | |
| function spritz_zoom(c) { | |
| zoom = zoom+c | |
| $('#spritz').css('font-size', zoom+'em'); | |
| } | |
| function spritz_refresh() { | |
| clearInterval(spritz); | |
| words_set(); | |
| i = 0; | |
| spritz_pause(); | |
| word_show(0); | |
| }; | |
| function spritz_select() { | |
| $words.select(); | |
| }; | |
| function spritz_expand() { | |
| $('html').toggleClass('fullscreen'); | |
| } | |
| /* AUTOSAVE FUNCTION */ | |
| function spritz_autosave() { | |
| $('html').toggleClass('autosave'); | |
| autosave = !autosave; | |
| if (autosave) { | |
| $('#autosave_checkbox').prop('checked', true); | |
| } else { | |
| $('#autosave_checkbox').prop('checked', false); | |
| } | |
| }; | |
| /* ALERT FUNCTION */ | |
| function spritz_alert(type) { | |
| var msg = ''; | |
| switch (type) { | |
| case 'loaded': | |
| msg = 'Data loaded from local storage'; | |
| break; | |
| case 'saved': | |
| msg = 'Words, Position and Settings have been saved in local storage for the next time you visit'; | |
| break; | |
| } | |
| $('#alert').text(msg).fadeIn().delay(2000).fadeOut(); | |
| } | |
| /* CONTROLS */ | |
| $('#spritz_wpm').on('input', function() { | |
| spritz_speed(); | |
| }); | |
| $('.controls').on('click', 'a, label', function() { | |
| switch (this.id) { | |
| case 'spritz_slower': | |
| spritz_slower(); break; | |
| case 'spritz_faster': | |
| spritz_faster(); break; | |
| case 'spritz_save': | |
| words_save(); break; | |
| case 'spritz_pause': | |
| spritz_flip(); break; | |
| case 'spritz_smaller': | |
| spritz_zoom(-0.1); break; | |
| case 'spritz_bigger': | |
| spritz_zoom(0.1); break; | |
| case 'spritz_autosave': | |
| spritz_autosave(); break; | |
| case 'spritz_refresh': | |
| spritz_refresh(); break; | |
| case 'spritz_select': | |
| spritz_select(); break; | |
| case 'spritz_expand': | |
| spritz_expand(); break; | |
| }; | |
| return false; | |
| }); | |
| $('.controls').on('mousedown', 'a', function() { | |
| switch (this.id) { | |
| case 'spritz_back': | |
| spritz_jog_back = setInterval(function() { | |
| spritz_back(); | |
| }, 100); | |
| break; | |
| case 'spritz_forward': | |
| spritz_jog_forward = setInterval(function() { | |
| spritz_forward(); | |
| }, 100); | |
| break; | |
| }; | |
| }); | |
| $('.controls').on('mouseup', 'a', function() { | |
| switch (this.id) { | |
| case 'spritz_back': | |
| clearInterval(spritz_jog_back); break; | |
| case 'spritz_forward': | |
| clearInterval(spritz_jog_forward); break; | |
| }; | |
| }); | |
| /* KEY EVENTS */ | |
| function button_flash(btn, time) { | |
| var $btn = $('.controls a.'+btn); | |
| $btn.addClass('active'); | |
| if (typeof(time) === 'undefined') time = 100; | |
| setTimeout(function() { | |
| $btn.removeClass('active'); | |
| }, time); | |
| } | |
| $(document).on('keyup', function(e) { | |
| if (e.target.tagName.toLowerCase() != 'body') { | |
| return; | |
| }; | |
| switch (e.keyCode) { | |
| case 32: | |
| spritz_flip(); button_flash('pause'); break; | |
| case 37: | |
| spritz_back(); button_flash('back'); break; | |
| case 38: | |
| spritz_faster(); button_flash('faster'); break; | |
| case 39: | |
| spritz_forward(); button_flash('forward'); break; | |
| case 40: | |
| spritz_slower(); button_flash('slower'); break; | |
| }; | |
| }); | |
| $(document).on('keydown', function(e) { | |
| if (e.target.tagName.toLowerCase() != 'body') { | |
| return; | |
| }; | |
| switch (e.keyCode) { | |
| case 37: | |
| spritz_back(); button_flash('back'); break; | |
| case 39: | |
| spritz_forward(); button_flash('forward'); break; | |
| }; | |
| }); | |
| /* INITIATE */ | |
| words_load(); | |
| /* LIGHT/DARK THEME */ | |
| $('.light').on('click', function() { | |
| $('html').toggleClass('night'); | |
| night = !night; | |
| return false; | |
| }); | |
| $('a.toggle').on('click', function() { | |
| $(this).siblings('.togglable').slideToggle(); | |
| return false; | |
| }); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
Use Spritz right now! Options for speed, localStorage saving, jog forward/backward, text size and dark/light theme, also with keyboard controls and progress bar. You'll never need to read conventionally again.
localStorage implementation by Keith Wyland, thanks Keith!
A Pen by Charlotte Dann on CodePen.
| @import compass | |
| $f-icon: 'Spritz', sans-serif | |
| $c-light-bg: #ddd | |
| $c-light-field-bg: #eee | |
| $c-light-markers: #000 | |
| $c-light-spritz: #000 | |
| $c-light-text: #000 | |
| $c-light-icon: #aaa | |
| $c-light-icon-hover: #777 | |
| $c-dark-bg: #000 | |
| $c-dark-field-bg: #191919 | |
| $c-dark-markers: #555 | |
| $c-dark-spritz: #bbb | |
| $c-dark-text: #888 | |
| $c-dark-icon: #444 | |
| $c-dark-icon-hover: #999 | |
| .spritz | |
| position: relative | |
| max-width: 30rem | |
| padding: 1rem 0 1.2rem | |
| border-top: 2px solid $c-light-markers | |
| border-bottom: 2px solid $c-light-markers | |
| margin: 10rem auto | |
| font-size: 1em | |
| &:before, &:after | |
| content: '' | |
| position: absolute | |
| left: 40% | |
| height: 0.8rem | |
| width: 2px | |
| margin-left: -1px | |
| background-color: $c-light-markers | |
| .night & | |
| border-color: $c-dark-markers | |
| &:before, &:after | |
| background-color: $c-dark-markers | |
| &:before | |
| top: 0 | |
| &:after | |
| bottom: 0 | |
| .spritz-word | |
| font-size: 1.6em | |
| line-height: 1.6em | |
| height: 1.7em | |
| font-weight: 600 | |
| color: $c-light-spritz | |
| .night & | |
| color: $c-dark-spritz | |
| div | |
| display: table-cell | |
| &:first-child | |
| width: 40% | |
| text-align: right | |
| &:nth-child(2) | |
| color: darken(red,5) | |
| .night & | |
| color: lighten(red,15) | |
| &:last-child | |
| width: 60% | |
| text-align: left | |
| .controls | |
| text-align: center | |
| &:after | |
| content: '' | |
| display: table | |
| clear: both | |
| a | |
| display: inline-block | |
| vertical-align: bottom | |
| color: $c-light-icon | |
| text-decoration: none | |
| transition: color 150ms linear | |
| &:hover, &.active | |
| color: $c-light-icon-hover | |
| .night & | |
| color: $c-dark-icon | |
| &:hover, &.active | |
| color: $c-dark-icon-hover | |
| .settings | |
| input, textarea, button | |
| box-sizing: border-box | |
| border: 0 | |
| color: $c-light-text | |
| background: transparent | |
| .night & | |
| color: $c-dark-text | |
| &:focus | |
| outline: none | |
| .settings-controls | |
| max-width: 30rem | |
| margin: 0 auto | |
| .speed | |
| float: left | |
| .interaction | |
| float: right | |
| a | |
| font-size: 3rem | |
| line-height: 4rem | |
| .save | |
| transition: opacity 0.2s linear | |
| opacity: 0 | |
| font-size: 2.5rem | |
| .paused & | |
| opacity: 1 | |
| .autosave & | |
| opacity: 0 | |
| &.active | |
| opacity: 0.4!important | |
| .pause | |
| margin: 0 | |
| width: 4rem | |
| text-align: center | |
| font-size: 4rem | |
| .paused &:before | |
| content: '\e601' | |
| position: relative | |
| margin-left: -0.4rem | |
| .wpm | |
| position: relative | |
| display: inline-block | |
| width: 7rem | |
| margin: 0 | |
| padding: 0 | |
| text-align: center | |
| font-weight: 600 | |
| font-size: 2rem | |
| line-height: 4rem | |
| vertical-align: top | |
| &::-webkit-inner-spin-button | |
| -webkit-appearance: none | |
| .extra-controls | |
| margin: 5rem auto 0 | |
| .toggle | |
| font-size: 2rem | |
| padding: 1rem 2rem | |
| .togglable | |
| display: none | |
| .zoom | |
| font-size: 2rem | |
| * | |
| display: inline-block | |
| padding: 0.6rem | |
| .autosave | |
| .checkbox | |
| display: none | |
| &:checked + .checkbox-label:before | |
| content: '\e60a' | |
| .checkbox-label | |
| user-select: none | |
| cursor: pointer | |
| &:before | |
| position: relative | |
| display: inline-block | |
| margin-right: 1rem | |
| width: 1.4rem | |
| vertical-align: top | |
| overflow: visible | |
| font-size: 1.8rem | |
| .words | |
| max-width: 30rem | |
| margin: 0 auto | |
| position: relative | |
| transition: max-width 0.2s linear | |
| .fullscreen & | |
| max-width: 60rem | |
| .demo-words | |
| height: 30rem | |
| .demo-words | |
| width: 100% | |
| height: 5em | |
| transition: height 0.2s linear | |
| padding: 1rem 1.5rem | |
| background-color: $c-light-field-bg | |
| &::-webkit-scrollbar | |
| width: 0.8rem | |
| &::-webkit-scrollbar-thumb | |
| background: darken($c-light-field-bg, 10) | |
| .night & | |
| background-color: $c-dark-field-bg | |
| &::-webkit-scrollbar-thumb | |
| background: lighten($c-dark-field-bg, 8) | |
| &::-webkit-resizer | |
| background: darken($c-dark-field-bg, 2) | |
| .progress-bar | |
| height: 2px | |
| width: 0 | |
| background: red | |
| opacity: 0.4 | |
| .words-controls | |
| margin: 0 0 2rem | |
| a | |
| margin: 0 0.6rem | |
| font-size: 2rem | |
| line-height: 2rem | |
| .refresh | |
| font-size: 2.6rem | |
| .fullscreen & .expand:before | |
| content: '\e612' | |
| .light | |
| position: absolute | |
| top: 2rem | |
| left: 3rem | |
| font-size: 3rem | |
| font-family: $f-icon | |
| text-decoration: none | |
| &:after | |
| content: '\e609' | |
| color: $c-light-icon | |
| .night &:after | |
| content: '\e608' | |
| color: $c-dark-icon | |
| #alert | |
| position: absolute | |
| top: 0 | |
| padding: 2rem | |
| box-sizing: border-box | |
| width: 100% | |
| text-align: center | |
| left: 0 | |
| pointer-events: none | |
| html | |
| font-size: 10px | |
| body | |
| background: $c-light-bg | |
| color: $c-light-text | |
| transition: background 0.1s linear | |
| margin: 3rem | |
| .night & | |
| background: $c-dark-bg | |
| color: $c-dark-text | |
| body, input, textarea, button | |
| font-size: 1.4rem | |
| font-family: Open Sans, sans-serif | |
| ::selection | |
| background: $c-light-icon | |
| color: $c-light-field-bg | |
| .night & | |
| background: $c-dark-icon | |
| color: $c-dark-field-bg | |
| @font-face | |
| font-family: 'Spritz' | |
| src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.eot?ziiuop') | |
| src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.eot?#iefixziiuop') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.woff?ziiuop') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.ttf?ziiuop') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.svg?ziiuop#spritz') format('svg') | |
| font-weight: normal | |
| font-style: normal | |
| [class*="entypo-"]:before | |
| font-family: $f-icon | |
| .entypo-fast-backward:before | |
| content: '\e606' | |
| .entypo-fast-forward:before | |
| content: '\e605' | |
| .entypo-save:before | |
| content: '\e600' | |
| .entypo-left-open:before | |
| content: '\e60e' | |
| .entypo-pause:before | |
| content: '\e602' | |
| .entypo-right-open:before | |
| content: '\e607' | |
| .entypo-dot-3:before | |
| content: '\e60b' | |
| .entypo-minus:before | |
| content: '\e60d' | |
| .entypo-search:before | |
| content: '\e604' | |
| .entypo-plus:before | |
| content: '\e60c' | |
| .entypo-cancel:before | |
| content: '\e603' | |
| .entypo-doc-text:before | |
| content: '\e60f' | |
| .entypo-cycle:before | |
| content: '\e610' | |
| .entypo-resize-full:before | |
| content: '\e611' | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" /> |