JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
window.addEventListener('load', function() {
var m = document.querySelector('.wav> div').getBoundingClientRect().height;
var s = 500;
var t = 5;
// timing
var a = s / t;
var r = s;
(function responsor() {
mist('.wav> div> i').setAll({
height: function() {
return (Math.random() * 100).toFixed(2) + '%';
},
transition: a + 'ms cubic-bezier(0.95, 0.05, 0.795, 0.035)'
}).time(a).setAll({
background: function(e, i) {
// random color
return 'hsl(' + i + ', ' + ((e.getBoundingClientRect().height / m) * 100).toFixed(2) + '%, 66%)';
},
height: function(e) {
var h = e.getBoundingClientRect().height.toFixed(0);
var l = h / t;
// for pseudo
mist(e).any(':before').set({
bottom: h + 'px',
transition: 0
}).time(a).set({
bottom: l + 'px',
transition: r + 'ms steps(' + h + ')'
});
// low response
return l + 'px';
},
transition: r + 'ms'
});
setTimeout(responsor, s);
})();
});