Creating the Morphing Effect of the Luma Dream Machine Website
In Tutorials, by Jean Mazouni
Learn how to create this powerful morphing effect with only JavaScript using the Canvas2D API.
canvas
Creating 3D Characters in Three.js
In Tutorials, by Michelle Barker
Are you looking to get started with 3D on the web? In this tutorial we’ll walk through creating a three-dimensional character using Three.js, adding some simple but effective animation, and a generative color palette.
Trigonometry in CSS and JavaScript: Beyond Triangles
In Tutorials, by Michelle Barker
In part three of our series we’ll look at how to create more interesting shapes with trigonometry, and how to draw them with the Canvas API.
Making Gooey Image Hover Effects with Three.js
In Tutorials, by Arno Di Nunzio
Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader.
Creating a Water-like Distortion Effect with Three.js
In Tutorials, by Daniel Velasquez
Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.
How to Build an Underwater-Style Navigation Using PixiJS
A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation.
Ambient Canvas Backgrounds
In Playground, by Sean Free
Five ambient webpage backgrounds created using the HTML5 Canvas API and jwagner’s Simplex Noise library.
Particle Effects for Buttons
In Playground, by Luis Goncalves
A little library that can be used for bursting particles effects. The idea is to disintegrate an element into particles and make it disappear (or vice versa).
Creative Audio Visualizers
In Playground, by Yannis Yannakopoulos
An exploration of modern, line-style sound visualization powered by p5.js and its p5.sound library.
Animated Fragment Slideshow
In Tutorials, by Luis Goncalves
A tutorial on how to create an experimental slideshow that animates in fragments. The slider is powered by the “Pieces” library, which was created for achieving interesting effects like these easily.
Animated Map Path for Interactive Storytelling
In Playground, by Lucas Bebber
An interactive journey where a Canvas map path is animated according to the content that is scrolled on the page.
Rain & Water Effect Experiments
In Playground, by Lucas Bebber
Some experimental rain and water drop effects made with WebGL and shown in different demo scenarios.
Prism Effect Slider with Canvas
In Tutorials, by Claudio Calautti
A tutorial on how to create a slider with a “prism” effect using HTML5 canvas globalCompositeOperation and a layering technique.
Resizing and Cropping Images with Canvas
In Tutorials, by Mike Riethmuller
Learn how to resize and crop images using JavaScript and the HTML5 Canvas element using controls, commonly seen in photo editing applications.
Animated Background Headers
In Playground, by Rachel Smith
A collection of animated background header effects for your inspiration. We use Canvas and Javascript to create an animated background for large site headers.
Techniques for Creating Textured Text
In Tutorials, by Sara Soueidan
In this article we’ll explore all the current techniques for creating image or texture filled text and show you how to apply them.
Interactive Particles Slideshow
In Playground, by Francesco Trillini
An interactive particles slideshow experiment built with HTML5 Canvas.
Top 10 Reasons to Use HTML5 Right Now
In Articles, by Patrick Cox
In order to further demystify HTML5 and help these knuckle dragging designers and developers to jump on the bandwagon I’ve put together a top ten list of reasons why we should all be using HTML5 right now.
