JSFiddle - React, Tailwind, and code Playground
HTML
<header id="pageheader">
<canvas id="bannerCanvas"></canvas>
</header>
CSS
#pageheader{
height: 100px;
width:100%;
background: #f4f5ef; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#222, #f4f5ef); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#222, #f4f5ef); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#222, #f4f5ef); /* For Firefox 3.6 to 15 */
background: linear-gradient(#222, #f4f5ef);
}
JavaScript
$(function(){
var word0 = '<RUBY>';
var word1 = '<HTML>';
var word2 = '<PHP>';
var word3 = '<SQL>';
var word4 = '<CSS>';
var word5 = '<C#>';
var word6 = '<JAVASCRIPT>';
var word7 = '<JAVA>';
var word8 = '<XML>';
var word9 = '<PYTHON>';
var fps = 30;
var delta = 1; // range (from 0) of possible dx or dy change
var max = 2; // maximum dx or dy values
var jCanvas = $('#bannerCanvas');
var canvas = document.getElementById('bannerCanvas');
canvas.width = jCanvas.parent().width();
canvas.height = jCanvas.parent().height();
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
function randStartX(){
var start_x = getRandomArbitrary(0, canvas.width);
return start_x;
}
function randStartY(){
var start_y = getRandomArbitrary(0, canvas.height);
return start_y;
}
jCanvas.bind("click", function(){
if(interval === undefined){
interval = window.setInterval(animate, 1000 / fps);
}
else{
interval = clearInterval(interval);
console.log(interval);
}
});
var cxt = canvas.getContext('2d');
cxt.fillStyle = '#FF0000';
var interval = window.setInterval(animate, 1000 / fps);
var w0x = randStartX();
var w0y = randStartY();
var w1x = randStartX();
var w1y = randStartY();
var w2x = randStartX();
var w2y = randStartY();
var w3x = randStartX();
var w3y = randStartY();
var w4x = randStartX();
var w4y = randStartY();
var w5x = randStartX();
var w5y = randStartY();
var w6x = randStartX();
var w6y = randStartY();
var w7x = randStartX();
var w7y = randStartY();
var w8x = randStartX();
var w8y = randStartY();
var w9x = randStartX();
var w9y = randStartY();
var w0dx = 0;
var w0dy = 0;
var w1dx = 0;
var w1dy = 0;
var w2dx = 0;
var w2dy = 0;
var w3dx = 0;
var w3dy = 0;
var w4dx = 0;
var w4dy = 0;
var w5dx = 0;
var w5dy = 0;
var w6dx = 0;
var w6dy = 0;
var w7dx = 0;
var w7dy = 0;
var w8dx = 0;
var w8dy = 0;
var w9dx = 0;
var w9dy =...