D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
nyem69
Full window
Github gist
Random typing ...
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v3.min.js"></script> <style> body { background:#000; color: #0f0; padding:24px; font-size:120%; } blink, .blink { -webkit-animation: blink 1s step-end infinite; -moz-animation: blink 1s step-end infinite; -o-animation: blink 1s step-end infinite; animation: blink 1s step-end infinite; } @-webkit-keyframes blink { 67% { opacity: 0 } } @-moz-keyframes blink { 67% { opacity: 0 } } @-o-keyframes blink { 67% { opacity: 0 } } @keyframes blink { 67% { opacity: 0 } } @keyframes flicker { 0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: .99; text-shadow: -1px -1px 0 $outline, 1px -1px 0 $outline, -1px 1px 0 $outline, 1px 1px 0 $outline, 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000; } 20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.4; text-shadow: none; } } </style> </head> <body> <script> function typewriting() { var vowels = 'aeiou', letters = 'bcdfghjklmnprstw', caps = letters.toUpperCase().split(''), lows = letters.split(''), vlows = vowels.split('') vcaps = vowels.toUpperCase().split(''), punc = ',.'.split(''), text=[], r=0; // generate random text d3.range(1, 1+parseInt(Math.random()*5)).forEach(function(p) { var para=[]; d3.range(1, 1+parseInt(Math.random()*5)).forEach(function(p) { var sentence=[]; d3.range(1, 2+parseInt(Math.random()*5)).forEach(function(p) { var words=[]; d3.range(1, 2+parseInt(Math.random()*5)).forEach(function(d){ var word=[]; d3.range(1, 2+parseInt(Math.random()*5)).forEach(function(k){ word.push(d3.shuffle(lows)[0]); word.push(d3.shuffle(vlows)[0]); }); words.push( word.join('') ); }); sentence.push( d3.shuffle(Math.random()>.5 ? vcaps : caps)[0] + words.join(' ') ); }); if (sentence) { para.push( sentence.join(' ')+d3.shuffle(punc)[0].replace(/\,$/,'.')+' ' ); } }); if (para.length) text.push( para ); }); var para =[], ttl =0; text.forEach(function(t) { var p = { key: r++, values:[] }; t.forEach(function(d,i) { var dur = Math.floor( d.length * 50 ); p.values.push({ key: r++, values: d, delay: ttl + 600, duration: dur }); ttl += dur + 600; }); para.push(p); }); // console.log('para', JSON.stringify(para,null,2)); var key = function(d){ return d.key }; var p = d3.select('body').selectAll('p').data(para, key); p.exit().remove(); p.enter().append('p') .attr('class','flicker 1s linear infinite'); var s = p.selectAll('.sentence').data(function(d){ return d.values }, key); s.exit().remove(); s.enter().append('span').attr('class','sentence') .call(function(sel) { sel.append('tt'); sel.append('span').attr('class','blink') .style({ background:'#0f0', width:'12px', opacity:0, }); }); s.select('tt') .html('') .transition() .delay(function(d,i){ return d.delay }) .duration(function(d){ return d.duration; }) .ease('cubic') .tween("html", function(d) { var i = d3.interpolateRound(this.textContent.length, d.values.length); return function(t) {this.textContent = d.values.slice(0, i(t)) }; }); s.select('.blink') .html(' ') .transition().delay(function(d){ return d.delay }) .style('opacity',1).duration(10) .transition() .delay(function(d){ return d.duration + d.delay }) .duration(600) .style('opacity',0) .remove(); window.setTimeout(typewriting, ttl+1000); } typewriting(); </script> </body>
https://d3js.org/d3.v3.min.js