nick34992
4/20/2016 - 5:13 AM

Animated Header Image. Using p5.js library.

Animated Header Image. Using p5.js library.

animated-header-image.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8/>

<link href='https://fonts.googleapis.com/css?family=Allerta+Stencil' rel='stylesheet' type='text/css'>
<script src="/libraries/p5.js"></script>
<script src="/libraries/p5.dom.js"></script>

<script>

var text;
var canvas;
i = 30;

function setup() {
  text = createDiv("indiessance");
  canvas = createCanvas(960, 150);
  background(0);
  text.position(i, 10);
  text.style("font-family", "Allerta Stencil");
  text.style("background-color", "#000000");
  text.style("color", "#ffffff");
  text.style("font-size", "72pt");
}

function draw() {
background(0);
  text.position(i, 10);
  text.style("color", "#ffffff");
  i = i + random(350);
  if (i > 350) {
    i = 30;
  }
  frameRate(1);
}

</script>

</head><body> </body></html>