potatosboxon,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: hsla(0, 0%, 66%, 1);
margin: 0;
}
div{
display: inline-block;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
function animate({timing, draw, duration}) {
let start = performance.now();
requestAnimationFrame(function animate(time) {
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
let progress = timing(timeFraction);
draw(progress);
if (timeFraction < 1) {
requestAnimationFrame(animate);
}
});
}
function inOutQuad(n){
n *= 2;
if (n < 1) return 0.5 * n * n;
return - 0.5 * (--n * (n - 2) - 1);
};
function easeOutExpo( t ) {
if( t === 1 ) {
return 1;
}
return ( -Math.pow( 2, -10 * t ) + 1 );
}
class Boulder extends HTMLDivElement{
constructor(color, left = 100, size = 15) {
super();
this.color = color;
this.left = left;
this.size = size;
this.style.background = this.color;
this.style.width = `${this.size}px`;
this.style.height = `${this.size}px`;
this.style.transform = `translate(${this.left}px, 0px)`;
this.option = {timing : easeOutExpo, draw : this.draw.bind(this), duration : 5000};
animate(this.option);
}
draw(progress){
this.style.transform = `translate(${this.left}px, ${(window.innerHeight - this.size) * progress|0}px)`;
}
}
customElements.define("custom-box", Boulder, { extends: "div" });
for (let i = 0; i < 7; i++) {
const color = '#' + ('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6);
const left = (window.innerWidth - 15) * Math.random()|0;
const box = new Boulder(color, left);
document.querySelector("body").append(box);
}
});
</script>
</head>
<body>
</body>
</html>