I’ve talked a bit about separating our semantic and non-semantic content within websites. We can take our rich non-semantic content and throw it onto a canvas. This provides a number of benefits, cleaning up our markup, reducing DOM elements and optimizes performance. I’ve put together some examples of how this can be used in both 2D and 3D canvas.
By drawing our content into a 2D canvas we get the freedom of dynamically drawing our content rather than using a repeating background image. It also allows us to animate the content inside the canvas, to create rich transitions without using DOM elements. Since the canvas is fixed, we can use the scroll position of the page to translate the content drawn on the canvas. We can also offset various layers being drawn to create parallax effects. Below is an example of this technique, note the clouds animating across the screen and how the layer moves at different speeds when you scroll.
See the Pen Fixed Canvas Parallax Demo by CJ Gammon (@cjgammon) on CodePen
We can apply the same concept to webGL by synchronizing the scene’s camera with the scroll position. This allows us to scroll through a 3D scene and incorporate 3D geometry and GLSL shaders. We can really attach the scroll position to any aspect of the webGL context making endless possibilities. It also allows us to have hardware acceleration on our background layer animations.
See the Pen The Great Fall by CJ Gammon (@cjgammon) on CodePen
I think these examples show huge potential for more optimal ways of making rich website scrolling experiences. By moving our animated non-semantic content onto our canvas, we can create clean and visually stunning websites.