Skip to content

Instantly share code, notes, and snippets.

@nyem69

nyem69/.block

Last active November 6, 2017 19:01
Show Gist options
  • Save nyem69/61cb4c3bfb68116c87981bfea31b286a to your computer and use it in GitHub Desktop.
Save nyem69/61cb4c3bfb68116c87981bfea31b286a to your computer and use it in GitHub Desktop.
Download ZIP
Random typing 2
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
body {
background:#000;
color: #0f0;
}
blink, .blink {
-webkit-animation: blink 500ms step-end infinite;
-moz-animation: blink 500ms step-end infinite;
-o-animation: blink 500ms step-end infinite;
animation: blink 500ms 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 }
}
</style>
</head>
<body>
<script>
var vowels = 'aeiou',
letters = 'bcdfghjklmnprstw',
caps = letters.toUpperCase().split(''),
lows = letters.split(''),
vlows = vowels.split('')
vcaps = vowels.toUpperCase().split(''),
punc = ',.'.split(''),
text=[],
r=0;
function typewriting() {
// 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');
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(' &nbsp; ')
.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment