Built with blockbuilder.org
forked from nyem69's block: Random typing ...
forked from nyem69's block: Random typing 2
license: mit |
Built with blockbuilder.org
forked from nyem69's block: Random typing ...
forked from nyem69's block: Random typing 2
<!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 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 } | |
} | |
@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> | |
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') | |
.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> |