Skip to main content

Grid-surge canvas effect applied to the header.

- ) (incept: )

Sparking up the header…

An example of Jack Rugile's Rainbow Grid Codepen implemented as a header background.

This demo includes user controls so you can see exactly how versatile the effect is. Very nice work Jack.

Blah canvas, blah vanilla JavaScript, blah lightweight script.

Mark up

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

Language HTML
<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.