JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="background" width="512" height="360">
</canvas>
JavaScript
var colors = ['#008800', '#00FF00', '#55FF55', '#BBFFBB'];
var words = [
"Abhishek", "Rahul", "shanky", "sunny", "bunny", "jack",
"pawan", "maurya", "piyush", "nidhi", "hunny",
"sharma", "jane", "smith", "meetu"];
function Bit (distance){
// size and speed are inversely proportional to distance
this.speed = 140 / distance;
this.fontSize = parseInt(Math.max(8, Math.min(4*this.speed, 20)));
// font and color will be decided accordingly
this.font = this.fontSize.toString() +'pt Calibri';
this.color = colors[(this.fontSize-8)/4];
// x and y positions are randomized
this.xpos = Math.random() * canvas.width;
this.ypos = Math.random() * 2 * canvas.height - canvas.height;
this.text = Math.floor(Math.random() * words.length);
// this draw the text for current frame
this.draw = function(){
// Formatting the text to display
context.fillStyle = this.color;
context.font = this.font;
var text = words[this.text];
var textWidth = context.measureText("W.").width;
// we need to draw the characters of the text
// one by one from top to bottom
for(var i=0; i<text.length; i++){
var charaterWidth = context.measureText(text[i]).width;
context.fillText( text[i],
this.xpos - charaterWidth/2,
this.ypos + i*textWidth);
}
};
// this will update the text for next frame
this.tick = function(){
if(this.ypos > canvas.height){
// if text crosses the bottom of the screen then reset
this.ypos = - canvas.height;
this.xpos = Math.random() * canvas.width;
this.text = Math.floor(Math.random() * words.length);
}
else
this.ypos += this.speed;
// we will give 2% change to change the text
var chance = Math.random();
if( chance < .01) // change to next word
...