Today we’d like to share some animated header backgrounds for your inspiration. The full-page background image header has been a web design trend for some time. Recently people have been turning to animation to add more visual interest to their website headers, and today we share a few examples of how you can do this.This collection uses JavaScript and Canvas to create various header animations.
Best jQuery HTML5 canvas Plugins & Tutorials with Demo
Smakflakes – various flakes jQuery plugin
- 5 preset color modes
- mode self-selection of color flakes
- mode of flakes as images
- you can specify size of the flakes and the number of
- can also specify power of the wind and its direction, the falling speed
- flakes rotation mode (when as images), clockwise, counterclockwise, to and fro, without rotation
- there is a button that allows you to disable the flakes (if it is annoying to the user)
- high speed with a lot of flakes, through the use of HTML5 Canvas tehnology
- lot of settings allows you to make the effect for your site unique and ideally suited for your site
Scratch.js : HTML5 Scratch Card
Scratch.js is a standalone library which brings interactivity to your website by allowing you to generate scratch cards for your visitors. Based on HTML5, scratch.js generate canvas on the fly and is optimized for all modern browsers and has touch support for mobile devices. You can use it to make scratch cards, coupons, promotionnal game and even advertisement.
Features:
- Touch support: works on IOS, android, windows phone
- Lightweight, with no external dependencies
- include working examples to avoid starting from scratch
- PSD file included
- Flexible and fully configurable
Smallworld.js : jQuery Plugin for Generating Small World Maps
Smallworld.js is a utility for generating map overviews using GeoJSON and HTML Canvas. It was created out of a need to render simple map previews, quickly and efficiently, without strict Terms of Use and without heavy client libraries.
The utility has no dependencies, weighs ~5kb (sans GeoJSON), and also comes with a simple wrapper to use with jQuery or Zepto.
jqScribble : A touch enabled Canvas Drawing Tool Plugin
jqScribble is a jquery plugin that will allow you to draw on an HTML5 canvas element. It works with standard mouse input and also touch input. It is designed to be extremely extensible, allowing for custom brushes and image saving. I have also provided with this plugin a sample PHP file that will demonstrate turning drawn images into actual images.
Cajal : JavaScript library to Animate shapes on HTML5 Canvas
Cajal is a javascript library to draw and animate shapes on the HTML5 canvas element.
Cajal provides object oriented functionality to draw and animate shapes on the canvas element. You can easily reuse animations or complex shape-objects in other projects, as every shape can be assinged to as many canvas elements on your site as you like.
