Grid-surge header

Coming soon…

A work in progress. Demo ready, content soon.

Example of Jack Rugile's Rainbow Grid Codepen used as a header background.

Blah canvas, blah vanilla JavaScript, blah small script.

To do: Pause animation when not in viewport, to reduce GPU / CPU overheads.

Mark up

The canvas is best placed first, even though it's positioned absolutely or fixed, though it may sit inside the header itself.

<canvas id=grid_surge class=grid-surge></canvas>
<header id=header class=header>
    <div class=header-copy>
      …
    </div>
</header>

It is considered Best practice use JavaScript to embed HTML elements (the canvas) which rely upon JavaScript to work.