|
|
|
|
|
 |
文章评论 |
 |
|
|
作者：关注恭听 |
|
留言时间：2016-10-08 17:54:27 |
|
|
<!DOCTYPE html><html class=''><head><script src='http://assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='http://assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='http://assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/pouretrebelle/pen/reGKw" /><meta name='viewport' content='width=device-width'><script src='//codepen.io/assets/libs/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans'><style class="cp-pen-styles">@charset "UTF-8";.spritz {position: relative;max-width: 30rem;padding: 1rem 0 1.2rem;border-top: 2px solid #000;border-bottom: 2px solid #000;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: #000;}.night .spritz {border-color: #555;}.night .spritz:before, .night .spritz:after {background-color: #555;}.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: #000;}.night .spritz-word {color: #bbb;}.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: #aaa;text-decoration: none;transition: color 150ms linear;}.controls a:hover, .controls a.active {color: #777;}.night .controls a {color: #444;}.night .controls a:hover, .night .controls a.active {color: #999;}.settings input, .settings textarea, .settings button {box-sizing: border-box;border: 0;color: #000;background: transparent;}.night .settings input, .night .settings textarea, .night .settings button {color: #888;}.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: opacity 0.2s linear;opacity: 0;font-size: 2.5rem;}.paused .settings-controls .save {opacity: 1;}.autosave .settings-controls .save {opacity: 0;}.settings-controls .save.active {opacity: 0.4 !important;}.settings-controls .pause {margin: 0;width: 4rem;text-align: center;font-size: 4rem;}.paused .settings-controls .pause:before {content: "";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;}.wpm::-webkit-inner-spin-button {-webkit-appearance: none;}.extra-controls {margin: 5rem auto 0;}.extra-controls .toggle {font-size: 2rem;padding: 1rem 2rem;}.extra-controls .togglable {display: none;}.extra-controls .zoom {font-size: 2rem;}.extra-controls .zoom * {display: inline-block;padding: 0.6rem;}.extra-controls .autosave .checkbox {display: none;}.extra-controls .autosave .checkbox:checked + .checkbox-label:before {content: "";}.extra-controls .autosave .checkbox-label {user-select: none;cursor: pointer;}.extra-controls .autosave .checkbox-label: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 .words {max-width: 60rem;}.fullscreen .words .demo-words {height: 30rem;}.words .demo-words {width: 100%;height: 5em;transition: height 0.2s linear;padding: 1rem 1.5rem;background-color: #eee;}.words .demo-words::-webkit-scrollbar {width: 0.8rem;}.words .demo-words::-webkit-scrollbar-thumb {background: #d5d5d5;}.night .words .demo-words {background-color: #191919;}.night .words .demo-words::-webkit-scrollbar-thumb {background: #2d2d2d;}.night .words .demo-words::-webkit-resizer {background: #141414;}.progress-bar {height: 2px;width: 0;background: red;opacity: 0.4;}.words-controls {margin: 0 0 2rem;}.words-controls a {margin: 0 0.6rem;font-size: 2rem;line-height: 2rem;}.words-controls .refresh {font-size: 2.6rem;}.fullscreen .words-controls .expand:before {content: "";}.light {position: absolute;top: 2rem;left: 3rem;font-size: 3rem;font-family: "Spritz", sans-serif;text-decoration: none;}.light:after {content: "";color: #aaa;}.night .light:after {content: "";color: #444;}#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: #ddd;color: #000;transition: background 0.1s linear;margin: 3rem;}.night body {background: #000;color: #888;}body, input, textarea, button {font-size: 1.4rem;font-family: Open Sans, sans-serif;}::selection {background: #aaa;color: #eee;}.night ::selection {background: #444;color: #191919;}@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: "Spritz", sans-serif;}.entypo-fast-backward:before {content: "";}.entypo-fast-forward:before {content: "";}.entypo-save:before {content: "";}.entypo-left-open:before {content: "";}.entypo-pause:before {content: "�";}.entypo-right-open:before {content: "";}.entypo-dot-3:before {content: "";}.entypo-minus:before {content: "";}.entypo-search:before {content: "";}.entypo-plus:before {content: "";}.entypo-cancel:before {content: "";}.entypo-doc-text:before {content: "";}.entypo-cycle:before {content: "";}.entypo-resize-full:before {content: "";}</style></head><body><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">SpritzThis 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.</textarea></div></div><a href="#" title="Change Theme" class="light"></a><div id="alert" class="alert"></div><script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script>/*Spritz Speed Reader by Charlotte Dannlocal 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(/[
]/g, ' {linebreak} ').replace(/[ ]{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;});//# sourceURL=pen.js</script></body></html> |
|
|
|
作者：小思 |
|
留言时间：2014-01-04 23:14:20 |
|
|
|
作者：西木子 |
|
留言时间：2013-12-27 14:31:21 |
|
|
阳光大哥: 再盖一个房子是俺的梦寐以求啊！呵呵
紫云： 就是的, 不管是真是假都高兴！呵呵
老度：欢迎欢迎！ 俺的黄粱美梦不想醒啊。呵呵! |
|
|
|
作者：老度 |
|
留言时间：2013-12-27 13:36:54 |
|
|
|
作者：紫云 |
|
留言时间：2013-12-27 12:42:03 |
|
|
|
作者：love阳光 |
|
留言时间：2013-12-27 11:10:55 |
|
|
如果不是在梦中，那么俺恭喜西木兄可以再盖一个房子了！ |
|
|
|
|
