How to Animate a Landing Page with HTML Canvas and JavaScript.
Introduction
A landing page creates the first impression of a brand when someone finds its website. The page has to stand out from the clutter of other similar websites out here in the wild and, a great way to achieve this is by using interactive animation on a landing page, in a playful or instructional way.
This article is for front-end developers who already know HTML and JavaScript. I’ll introduce you to creative coding and the HTML Canvas followed by an example project showing the steps taken to build the fish pond page as shown above.
This fish pond project will show how to animate objects, simulate real-world physics, and use particle emitters to make bubbles!
What is HTML canvas and why does it Matter?
<canvas> is a relatively new HTML element that is used to render 2D and 3D graphics on a webpage using JavaScript. Everything from text to animation, video games and generative art can be created with the canvas.
Understanding the power of the HTML canvas gives web designers and developers a wider set of tools to play with.
The History of HTML canvas
Before the <canvas> element was introduced, you would have to use a browser plug-in like Adobe flash to create rich interactive graphics on the web and, even worse anyone visiting the site had to install the plugin before they could see the content.
Adobe Flash was a cool alternative during its hay day but now most modern browsers support the HTML Canvas by default.
A few Terms to Take Note of
- BOM: In HTML the objects on a page are made from
<tags>and are organized in a tree called the Document Object Model (DOM). However, on the canvas display objects like shapes and sprites are made from JavaScript functions, and organized in a tree called the Bitmap Object Model (BOM) — not to be confused with the “Browser Object Model”, which is not an official term either. - WebGL: Web graphics library (WebGL) makes use of the HTML canvas to render interactive 3D graphics. A WebGL program will contain JavaScript and code which runs on a computer’s Graphics processing unit (GPU).
List of JavaScript Frameworks for working with HTML Canvas
You can choose from a bunch of very powerful libraries when creating for the <canvas>. They give you a Bitmap Object Model (BOM) along with functions and classes that will increase your productivity.
- Three JS: A JavaScript library for animated 3D graphics using WebGL
- Babylon JS: A powerful engine for rendering complex 3D scenes
- CreateJS: a suite of libraries including; EaselJS, TweenJS, PreloadJS and SoundJS
- ZIM: extends CreateJS with classes, helper functions, components and controls
- Pixi.js: a 2D canvas / WebGL rendering engine with a BOM and events
- Phaser: a popular game development framework with a strong community based on PixiJS
- P5.js: a JavaScript port of Processing (in Java) for experimental works
- Paper.js: a vector graphics scripting framework with Bezier controls
Steps to build the landing page example
What can be created with the <canvas> is only limited by your imagination and coding skills. This simple project below will show you what it’s like to code with the <canvas> using one of my favorite frameworks; ZIM.
See the Canvas in action below! Click around the stage to make the fish swim and hit the floaters. When you are done goofing around continue reading.
Designing the page
👉📺 https://edgidesign.com/wp-content/uploads/2022/03/How-to-design-the-page.mp4
Before we start coding, we want to visualize our page in a graphics editing program. I’ used Adobe Illustrator as shown in the video above. The goal of this step is to
- Organize the layout of the page using wireframes or real assets.
- Identify the different objects on the screen which will be created on the
<canvas>with JavaScript
Now we can see all the objects that will be on the page and the next thing to do is export them; rocks, floaters, and the shell and Starfish as transparent PNG images.
In the next part of this series we will dive into the code and start building our landing page.
