10 recent HTML5 canvas tutorials

In today’s collection I gathered all the latest tutorials on html5 (canvas). I hope that they will help you to learn how to work with html5 (javascript) more clearly. Some of them are initial articles on game development, but, you can also find here other interesting articles like typographic effects, charts, curves, triangle meshes and even ascii animation.

1. Ping-Pong Game Tutorial with HTML5 Canvas and Sounds

Making games in HTML5 Canvas is not that hard once you learn the logic of the game you are creating. In this tutorial, you will learn how to create a not-so-basic ping-pong game in Canvas.

2. Create a Game Character with HTML5

In this series we will explore how to create a game character using HTML5 Canvas and JavaScript.

3. HTML5 Canvas Interactive Scatter Plot with 20,000 Nodes using KineticJS

The purpose of this lab is to demonstrate she shear number of nodes that KineticJS can handle by rendering 20,000 circles which are sensitive to mouseover events and can be drag and dropped.

4. Typographic effects in canvas

The following examples deal with one area in <canvas> that hasn’t gotten much attention; creating text-effects. The variety of text-effects that can be created in <canvas> are as vast as you can imagine—these demos cover a sub-section of what is possible.

5. Bring Your Charts to Life with HTML5

This article demonstrates how to create an animated Bar Chart on the HTML5 Canvas using a little bit of JavaScript and a little bit of imagination

6. How to build a racing game

This article describes how to create an interactive racing game in canvas.

7. Curves

Just playing around with some generative type drawing today, using curves.

8. Triangle mesh for 3D objects in HTML5

Today’s lesson is a bridge between two-dimensional graphics in html5 and truly three-dimensional (using WebGL). Today I will show how to draw three-dimensional objects using a polygonal mesh.

9. Ascii Animation

Images can be converted into ascii art by turning the pixels grayscale and representing them using text characters. Dense characters are used for dark pixels and sparse characters are used for light pixels.

10. HTML5 Color Picker (canvas)

In our new tutorial we are going to create an easy, but effective color picker using HTML5. I think that you have already seen different jQuery versions of colorpicker, our today’s goal – to create something similar, and even better.

Calculator using knockout.js

Today I’d like to share our first tutorial about Knockout.js. This is the one of popular javascript libraries which let us use Model-View-View Model (MVVM) pattern in our web applications. Knockout is an extendable and crossbrowser framework, this is a new look at building of javascript applications. The main idea is separation of logic and presentation. We have to create a model and bind it with presentation. To link View and ViewModel is used data-attributes of HTML5. As a demonstration – I prepared a Math calculator with this new library (knockout.js).

Live Demo

download in package

If you are ready – let’s start!

Step 1. HTML

This is our presentation side (html markup):

<script src="js/knockout-2.2.0.js"></script>
<div class="calculator">
    <p>Math Calculator</p>
    <h3 data-bind="text: commandline"></h3>
    <div data-bind="foreach: numbers" class="numbers">
        <button data-bind="value: val, text: val, click: $parent.addNumber"></button>
    </div>
    <div data-bind="foreach: commands" class="commands">
        <button data-bind="value: command, text: command, click: $parent.addCommand, disable: $parent.hasNumbers"></button>
    </div>
    <button data-bind="click: doCalculate" style="width: 330px">=</button>
</div>
<script src="js/main.js"></script>

Our calculator consists of ten digit buttons (numbers) and nine commands. I’m going to use two sets: digits and commands (to generate buttons) instead adding all of them manually. Now, we have to review and understand the Model to understand how it works.

Step 2. JS

js/main.js

var CalculatorModel = function() {
    var self = this;

    // array of possible commands
    self.commands = [
        {command: ' + '},
        {command: ' - '},
        {command: ' * '},
        {command: ' / '},
        {command: 'sin', action: 'Math.sin(__param__)'},
        {command: 'cos', action: 'Math.cos(__param__)'},
        {command: 'tan', action: 'Math.tan(__param__)'},
        {command: 'ln', action: 'Math.log(__param__)'},
        {command: 'log', action: 'Math.log(__param__) / Math.log(10)'},
    ];

    // array of possible numbers
    self.numbers = [
        {val: 1},
        {val: 2},
        {val: 3},
        {val: 4},
        {val: 5},
        {val: 6},
        {val: 7},
        {val: 8},
        {val: 9},
        {val: 0},
    ];

    // result command line
    self.commandline = ko.observable('');

    // last used command
    self.lastCommand = ko.observable('');

    // do we need cleanup?
    self.needCleanup = ko.observable(false);

    // add a number function
    self.addNumber = function(e) {
        if (self.needCleanup()) {
            self.commandline('');
            self.needCleanup(false);
        }

        // we don't need to add leading zeros
        if (this.val == 0 && self.commandline() == '') {
            return;
        }
        self.commandline(self.commandline() + this.val);
    };

    // add a command function
    self.addCommand = function(e) {
        if (e.action && self.commandline()) { // in case of commands which don't require a second value - we have to calculate a value
            var newCommand = e.action.replace('__param__', self.commandline());
            self.commandline(eval(newCommand));
            self.needCleanup(true);
        }

        if (self.lastCommand() == '') { // put a command into command line
            if (! e.action) {
                self.commandline(self.commandline() + e.command);
            }
            self.lastCommand(e.command);
        }
    };

    // calculation
    self.doCalculate = function(e) {
        self.commandline(eval(self.commandline()));

        if (self.lastCommand() != '') {
            self.lastCommand('');
        }
        self.needCleanup(true);
    };

    // disable buttons if we haven't added any numbers yet
    self.hasNumbers = ko.computed(function() {
        return self.commandline() == '';
    }, self);
};

ko.applyBindings(new CalculatorModel());

This is our Calculator Model, in the beginning – I defined two arrays (commands and numbers). They contain all the possible digits and action (for our buttons). As you know, for usual commands (like adding, subtracting, multiplying and dividing) we have to use two numbers to operate with, in case of other functions (sin, cos, tan etc) – only one. I had to put a real javascript commands as values of ‘action’ field. The main idea of this calculator is to compose a string (of math actions) to evaluate. In case if we need to sum two numbers (as example 2 and 3) we have to save ’2+3′ as command. And when we click ‘=’ button – we have to evaluate this command and display a result. And, now we can use foreach (in the Presentation) to display all the buttons (with digits and actions):

    <div data-bind="foreach: numbers" class="numbers">
        <button data-bind="value: val, text: val, click: $parent.addNumber"></button>
    </div>
    <div data-bind="foreach: commands" class="commands">
        <button data-bind="value: command, text: command, click: $parent.addCommand, disable: $parent.hasNumbers"></button>
    </div>

As you see – we can use variables (and even functions) of our Model in the Presentation (DOM model). When we click on the digit buttons – the script adds digits, when we click on the commands – the script uses these commands to calculate a result. I hope that you will be able to understand rest logic of our application.

Step 2. JS

Finally, I would like to publish CSS styles of our calculator:

css/main.css

.calculator {
    /*css3 gradient*/
    background: #e2e2e2; /* Old browsers */
    background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */

    display: block;
    margin: 20px auto 0;
    padding: 20px;
    position: relative;
    width: 340px;

    /*css3 border radius*/
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;

    /*css3 shadow*/
    -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
}
.calculator button {
    background-color: #eeeeee;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
    background-image: linear-gradient(top, #eeeeee, #cccccc);
    border: 1px solid #ccc;
    border-bottom: 1px solid #bbb;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    color: #333;
    font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    margin: 5px;
    padding: 8px 0;
    text-align: center;
    text-shadow: 0 1px 0 #eee;
    width: 100px;
}
.calculator button:hover {
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(top, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
}
.calculator button:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.calculator p {
    margin-bottom: 15px;
    text-align: center;
}
.calculator h3 {
    background-color: rgba(255, 255, 255, 0.4);
    height: 23px;
    margin-bottom: 10px;
    padding: 8px;
    text-align: right;
}
.calculator div {
    background-color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;

    /*css3 border radius*/
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

Live Demo

download in package

Conclusion

This is all for today, we have just finished developing the math calculator. If you need – it is pretty easy to expand functionality of this calculator, all you need is to expand our Model (and add own action buttons here). See you next time, good luck!

Triangle mesh for 3D objects in HTML5

Today’s lesson is a bridge between two-dimensional graphics in html5 and truly three-dimensional (using WebGL). Today I will show how to draw three-dimensional objects using a polygonal mesh. A polygon mesh or unstructured grid is a collection of vertices, edges and faces that defines the shape of a polyhedral object in 3D computer graphics and solid modeling. The faces usually consist of triangles, quadrilaterals or other simple convex polygons, since this simplifies rendering, but may also be composed of more general concave polygons, or polygons with holes.

In order to understand what it is about, I recommend to read the basis described in wikipedia.
To demonstrate, we have prepared simple three-dimensional objects – a cube and multi-dimensional sphere (with a variable number of faces).

Live Demo

download in package

If you are ready – let’s start!

Step 1. HTML

As usual (for all canvas-based demos) we have a very basic html markup (with a single canvas object inside):

<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Triangle mesh for 3D objects in HTML5 | Script Tutorials</title>

        <!-- add styles -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <!-- add script -->
        <script src="js/meshes.js"></script>
        <script src="js/transform.js"></script>
        <script>
            //var obj = new cube();
            //var obj = new sphere(6);
            var obj = new sphere(16);
        </script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <div class="container">
            <canvas id="scene" height="500" width="700" tabindex="1"></canvas>
            <div class="hint">Please use Up / Down keys to change opacity</div>
        </div>
    </body>
</html>

I extracted a generated object initialization here, look:

    <script>
        //var obj = new cube();
        //var obj = new sphere(6);
        var obj = new sphere(16);
    </script>

It means that if we need to display a cube – you have to uncomment the first one line, if you’d like to display a sphere with 6 faces – select the second variant.

Step 2. JS

There are three JS files (main.js, meshes.js and transform.js), we will publish two of them, third one (transform.js) contains only math-related functions (to rotate, scale, translate and project objects). It will be available in our package. So, let’s review the code of the first javascript:

js/meshes.js

// get random color
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

// prepare object
function prepareObject(o) {
    o.colors = new Array();

    // prepare normals
    o.normals = new Array();
    for (var i = 0; i < o.faces.length; i++) {
        o.normals[i] = [0, 0, 0];

        o.colors[i] = getRandomColor();
    }

    // prepare centers: calculate max positions
    o.center = [0, 0, 0];
    for (var i = 0; i < o.points.length; i++) {
        o.center[0] += o.points[i][0];
        o.center[1] += o.points[i][1];
        o.center[2] += o.points[i][2];
    }

    // prepare distances
    o.distances = new Array();
    for (var i = 1; i < o.points.length; i++) {
        o.distances[i] = 0;
    }

    // calculate average center positions
    o.points_number = o.points.length;
    o.center[0] = o.center[0] / (o.points_number - 1);
    o.center[1] = o.center[1] / (o.points_number - 1);
    o.center[2] = o.center[2] / (o.points_number - 1);

    o.faces_number = o.faces.length;
    o.axis_x = [1, 0, 0];
    o.axis_y = [0, 1, 0];
    o.axis_z = [0, 0, 1];
}

// Cube object
function cube() {

    // prepare points and faces for cube
    this.points=[
        [0,0,0],
        [100,0,0],
        [100,100,0],
        [0,100,0],
        [0,0,100],
        [100,0,100],
        [100,100,100],
        [0,100,100],
        [50,50,100],
        [50,50,0],
    ];

    this.faces=[
        [0,4,5],
        [0,5,1],
        [1,5,6],
        [1,6,2],
        [2,6,7],
        [2,7,3],
        [3,7,4],
        [3,4,0],
        [8,5,4],
        [8,6,5],
        [8,7,6],
        [8,4,7],
        [9,5,4],
        [9,6,5],
        [9,7,6],
        [9,4,7],
    ];

    prepareObject(this);
}

// Sphere object
function sphere(n) {
    var delta_angle = 2 * Math.PI / n;

    // prepare vertices (points) of sphere
    var vertices = [];
    for (var j = 0; j < n / 2 - 1; j++) {
        for (var i = 0; i < n; i++) {
            vertices[j * n + i] = [];
            vertices[j * n + i][0] = 100 * Math.sin((j + 1) * delta_angle) * Math.cos(i * delta_angle);
            vertices[j * n + i][1] = 100 * Math.cos((j + 1) * delta_angle);
            vertices[j * n + i][2] = 100 * Math.sin((j + 1) * delta_angle) * Math.sin(i * delta_angle);
        }
    }
    vertices[(n / 2 - 1) * n] = [];
    vertices[(n / 2 - 1) * n + 1] = [];

    vertices[(n / 2 - 1) * n][0] = 0;
    vertices[(n / 2 - 1) * n][1] =  100;
    vertices[(n / 2 - 1) * n][2] =  0;

    vertices[(n / 2 - 1) * n + 1][0] = 0;
    vertices[(n / 2 - 1) * n + 1][1] = -100;
    vertices[(n / 2 - 1) * n + 1][2] = 0;

    this.points = vertices;

    // prepare faces
    var faces = [];
    for (var j = 0; j < n / 2 - 2; j++) {
        for (var i = 0; i < n - 1; i++) {
            faces[j * 2 * n + i] = [];
            faces[j * 2 * n + i + n] = [];

            faces[j * 2 * n + i][0] = j * n + i;
            faces[j * 2 * n + i][1] = j * n + i + 1;
            faces[j * 2 * n + i][2] = (j + 1) * n + i + 1;
            faces[j * 2 * n + i + n][0] = j * n + i;
            faces[j * 2 * n + i + n][1] = (j + 1) * n + i + 1;
            faces[j * 2 * n + i + n][2] = (j + 1) * n + i;
        }

        faces[j * 2 * n + n - 1] = [];
        faces[2 * n * (j + 1) - 1] = [];

        faces[j * 2 * n + n - 1  ][0] = (j + 1) * n - 1;
        faces[j * 2 * n + n - 1  ][1] = (j + 1) * n;
        faces[j * 2 * n + n - 1  ][2] = j * n;
        faces[2 * n * (j + 1) - 1][0] = (j + 1) * n - 1;
        faces[2 * n * (j + 1) - 1][1] = j * n + n;
        faces[2 * n * (j + 1) - 1][2] = (j + 2) * n - 1;
    }
    for (var i = 0; i < n - 1; i++) {
        faces[n * (n - 4) + i] = [];
        faces[n * (n - 3) + i] = [];

        faces[n * (n - 4) + i][0] = (n / 2 - 1) * n;
        faces[n * (n - 4) + i][1] = i;
        faces[n * (n - 4) + i][2] = i + 1;
        faces[n * (n - 3) + i][0] = (n / 2 - 1) * n + 1;
        faces[n * (n - 3) + i][1] = (n / 2 - 2) * n + i + 1;
        faces[n * (n - 3) + i][2] = (n / 2 - 2) * n + i;
    }

    faces[n * (n - 3) - 1] = [];
    faces[n * (n - 2) - 1] = [];

    faces[n * (n - 3) - 1][0] = (n / 2 - 1) * n;
    faces[n * (n - 3) - 1][1] = n - 1;
    faces[n * (n - 3) - 1][2] = 0;
    faces[n * (n - 2) - 1][0] = (n / 2 - 1) * n + 1;
    faces[n * (n - 2) - 1][1] = (n / 2 - 2) * n;
    faces[n * (n - 2) - 1][2] = (n / 2 - 2) * n + n - 1;

    this.faces=faces;

    prepareObject(this);
}

In the most beginning, we should prepare all points and faces of our object. There are 2 functions: cube (which generates initial arrays for a simple cube object) and sphere (to generate sphere). As you see – it is much more difficult to calculate all points and faces for multi-dimensional sphere. Once we get all these points and surfaces we have to calculate other params (like normals, distances, absolute center and three axis).

js/main.js

// inner variables
var canvas, ctx;
var vAlpha = 0.5;
var vShiftX = vShiftY = 0;
var distance = -700;
var vMouseSens = 0.05;
var iHalfX, iHalfY;

// initialization
function sceneInit() {
    // prepare canvas and context objects
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    iHalfX = canvas.width / 2;
    iHalfY = canvas.height / 2;

    // initial scale and translate
    scaleObj([3, 3, 3], obj);
    translateObj([-obj.center[0], -obj.center[1], -obj.center[2]],obj);
    translateObj([0, 0, -1000], obj);

    // attach event handlers
    document.onkeydown = handleKeydown;
    canvas.onmousemove = handleMousemove;

    // main scene loop
    setInterval(drawScene, 25);
}

// onKeyDown event handler
function handleKeydown(e) {
    kCode = ((e.which) || (e.keyCode));
    switch (kCode) {
        case 38: vAlpha = (vAlpha <= 0.9) ? (vAlpha + 0.1) : vAlpha; break; // Up key
        case 40: vAlpha = (vAlpha >= 0.2) ? (vAlpha - 0.1) : vAlpha; break; // Down key
    }
}

// onMouseMove event handler
function handleMousemove(e) {
    var x = e.pageX - canvas.offsetLeft;
    var y = e.pageY - canvas.offsetTop;

    if ((x > 0) && (x < canvas.width) && (y > 0) && (y < canvas.height)) {
        vShiftY = vMouseSens * (x - iHalfX) / iHalfX;
        vShiftX = vMouseSens * (y - iHalfY) / iHalfY;
    }
}

// draw main scene function
function drawScene() {
    // clear canvas
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // set fill color, stroke color, line width and global alpha
    ctx.strokeStyle = 'rgb(0,0,0)';
    ctx.lineWidth = 0.5;
    ctx.globalAlpha= vAlpha;

    // vertical and horizontal rotate
    var vP1x = getRotationPar([0, 0, -1000], [1, 0, 0], vShiftX);
    var vP2x = getRotationPar([0, 0, 0], [1, 0, 0], vShiftX);
    var vP1y = getRotationPar([0, 0, -1000], [0, 1, 0], vShiftY);
    var vP2y = getRotationPar([0, 0, 0], [0, 1, 0], vShiftY);
    rotateObj(vP1x, vP2x, obj);
    rotateObj(vP1y, vP2y, obj);

    // recalculate distances
    for (var i = 0; i < obj.points_number; i++) {
        obj.distances[i] = Math.pow(obj.points[i][0],2) + Math.pow(obj.points[i][1],2) + Math.pow(obj.points[i][2], 2);
    }

    // prepare array with face triangles (with calculation of max distance for every face)
    var iCnt = 0;
    var aFaceTriangles = new Array();
    for (var i = 0; i < obj.faces_number; i++) {
        var max = obj.distances[obj.faces[i][0]];
        for (var f = 1; f < obj.faces[i].length; f++) {
            if (obj.distances[obj.faces[i][f]] > max)
                max = obj.distances[obj.faces[i][f]];
        }
        aFaceTriangles[iCnt++] = {faceVertex:obj.faces[i], faceColor:obj.colors[i], distance:max};
    }
    aFaceTriangles.sort(sortByDistance);

    // prepare array with projected points
    var aPrjPoints = new Array();
    for (var i = 0; i < obj.points.length; i++) {
        aPrjPoints[i] = project(distance, obj.points[i], iHalfX, iHalfY);
    }

    // draw an object (surfaces)
    for (var i = 0; i < iCnt; i++) {

        ctx.fillStyle = aFaceTriangles[i].faceColor;

        // begin path
        ctx.beginPath();

        // face vertex index
        var iFaceVertex = aFaceTriangles[i].faceVertex;

        // move to initial position
        ctx.moveTo(aPrjPoints[iFaceVertex[0]][0], aPrjPoints[iFaceVertex[0]][1]);

        // and draw three lines (to build a triangle)
        for (var z = 1; z < aFaceTriangles[i].faceVertex.length; z++) {
            ctx.lineTo(aPrjPoints[iFaceVertex[z]][0], aPrjPoints[iFaceVertex[z]][1]);
        }

        // close path, strole and fill a triangle
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
    }
}

// sort function
function sortByDistance(x, y) {
    return (y.distance - x.distance);
}

// initialization
if (window.attachEvent) {
    window.attachEvent('onload', sceneInit);
} else {
    if (window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            sceneInit();
        };
        window.onload = newonload;
    } else {
        window.onload = sceneInit;
    }
}

Well, it’s the time to back to our main page functionality. As soon as the page is loaded, we do main initialization (sceneInit function). We create canvas and context objects, then we perform initial scale and translate of our object which we created in the most beginning (cube or sphere). Then we attach onkeydown and onmousemove event handlers and set timer to draw our main scene (drawScene function). Don’t forget that we can change globalAlpha param with clicking Up/Down buttons.

Live Demo

download in package

Conclusion

That’s all for today, we have just finished building the basic triangle mesh objects at canvas. See you next time, good luck!

11 Hot Fall jQuery plugins (October 2012)

Today we would like to share our new hand made collection of the most impressive jQuery plugins. There are plugins which help you to build a nice presentation, to re-order different block elements over page, to display various social media feeds, to build a photo gallery, to build a nice context menu and so on, welcome to test these plugins.

1. impress.js

It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers.

2. Floater

This plugin let you organize impressive re-ordering of blocks (or images). Every block can contain any html-markup.

3. PFold

PFold is a very experimental jQuery plugin that makes it possible to open elements in a paper-like unfolding effect. An element can be unfolded in 3D in order to reveal some other content.

4. Socialist

Socialist is a social feed plugin that combines multiple social media feeds in one place. Use it to combine content and create a social wall from Facebook, Twitter, LinkedIn, YouTube, Pinterest, Flickr, Tumblr, Craiglist RSS and other social networks.

5. Fresco

Fresco is a beautiful responsive lightbox. It can be used to create stunning overlays that work great at any screen size, in all browsers on every device.

6. Allofthelights.js

Allofthelights.js is a jQuery plugin that allows to switch off the light, for your videos to stand out. Give it a try by clicking the switch next to the video. Bear in mind this is a first version.

7. dynamoCanvas

dynamoCanvas is a jQuery plugin designed to make it as simple as possible to utilize all of the features of the HTML5 canvas tag.

8. contextMenu

The plugin makes it easy to add right-click context menu functionality to any web application. A context menu can help make a web application feel even more like a native application.

9. uLED

The jQuery uLED is a jQuery plugin which can be used as a countdown, a clock or as a random numbers.

10. Adaptor, a jQuery 3D content slider

Adaptor is a light-weight content slider that aims to provide a simple interface for developers to create cool 2D or 3D slide animation transitions.

11. 3D CSS3 Book Generator

This plugin is our own lightweight generator of books.

Infographic: A fresh look at HTML5

Today I prepared a new and fresh collection of infographics about HTML5. It tells us about current state of HTML, explains the evolution, key features and capabilities of HTML5 in an informative and interesting manner. I am sure that you are sure to find answers to your questions about html5

Information Graphics (known as infographics) are one of the best ways to transfer some information into a reader’s mind. It can be something new, or other useful information gathered in one place. Nowadays many people don’t have enough time to read a lot of text on multiple screens. Infographics makes the information intuitive and understandable. That’s why we would like to share the best relevant infographics from all over the web.

Original source: The Current State Of HTML5

Original source: HTML5-Past, Present and Future

Original source: HTML5 APIs

Original source: HTML5: Why Developers Need It

HTML5 Radial Gradient

The one of our readers asked me – what if generate a radial gradient with html5 instead of using ready images (for our’s color picker which we developed several days ago). And, I decided, why not? This is not so difficult, and it would be useful for everybody. The main idea is to separate a circle into multiple sectors, and – to fill these sectors with a radial color (which depends on an angle). After working for a while – I got the desired result – canvas-based radial gradient.

Live Demo

download in package

If you are ready – let’s start!

Step 1. HTML

As usual (for all canvas-based demos) we have a very basic html markup (with a single canvas object inside):

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>HTML5 Radial Gradient | Script Tutorials</title>

        <!-- add styles -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <!-- add script -->
        <script src="js/script.js"></script>
    </head>
    <body>
        <div class="container">
            <canvas id="gradient" width="500" height="500" tabindex="1"></canvas>
        </div>
    </body>
</html>

Step 2. JS

Now, please create an empty ‘script.js’ file (inside ‘js’ folder) and put this code inside (this is full JS code of our HTML5 Radial Gradient script). I’ll explain the main functionality below this code.

js/script.js

// Get angle color function
function getAngleColor(angle) {
    var color, d;

    if (angle < Math.PI * 2 / 5) { // angle: 0-72
        d = 255 / (Math.PI * 2 / 5) * angle;
        color = '255,' + Math.round(d) + ',0'; // color: 255,0,0 - 255,255,0
    } else if (angle < Math.PI * 4 / 5) { // angle: 72-144
        d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 2 / 5);
        color = (255 - Math.round(d)) + ',255,0'; // color: 255,255,0 - 0,255,0
    } else if (angle < Math.PI * 6 / 5) { // angle: 144-216
        d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 4 / 5);
        color = '0,255,' + Math.round(d); // color: 0,255,0 - 0,255,255
    } else if (angle < Math.PI * 8 / 5) { // angle: 216-288
        d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 6 / 5);
        color = '0,'+(255 - Math.round(d)) + ',255'; // color: 0,255,255 - 0,0,255
    } else { // angle: 288-360
        d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 8 / 5);
        color = Math.round(d) + ',0,' + (255 - Math.round(d)) ; // color: 0,0,255 - 255,0,0
    }
    return color;
}

// inner variables
var iSectors = 360;
var iSectorAngle = (360 / iSectors) / 180 * Math.PI; // in radians

// Draw radial gradient function
function drawGradient() {

    // prepare canvas and context objects
    var canvas = document.getElementById('gradient');
    var ctx = canvas.getContext('2d');

    // clear canvas
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // save current context
    ctx.save();

    // move to center
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // draw all sectors
    for (var i = 0; i < iSectors; i++) {

        // start and end angles (in radians)
        var startAngle = 0;
        var endAngle = startAngle + iSectorAngle;

        // radius for sectors
        var radius = (canvas.width / 2) - 1;

        // get angle color
        var color = getAngleColor(iSectorAngle * i);

        // draw a sector
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.arc(0, 0, radius, startAngle, endAngle, false);
        ctx.closePath();

        // stroke a sector
        ctx.strokeStyle = 'rgb('+color+')';
        ctx.stroke();

        // fill a sector
        ctx.fillStyle = 'rgb('+color+')';
        ctx.fill();

        // rotate to the next sector
        ctx.rotate(iSectorAngle);
    }

    // restore context
    ctx.restore();
}

// initialization
if(window.attachEvent) {
    window.attachEvent('onload', drawGradient);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            drawGradient();
        };
        window.onload = newonload;
    } else {
        window.onload = drawGradient;
    }
}

Once our window has loaded (onload event) we draw our radial gradient (drawGradient function). In the beginning we prepare canvas and context objects (as usual), after – more interesting: as I told, we are going to split whole circle (360 degrees) into sectors (I decided to use 360 sectors for more smooth gradient). In order to draw every sector we should jump to the center, draw an arc, and then – we need to fill this area (sector) with a certain color. To generate radial color we have to return a certain color depending on an angle. I defined ‘getAngleColor’ function for this purpose. Once we have drawn a sector – we draw next sector (until we finish with all of them to build whole radial circle).

Live Demo

download in package

Conclusion

That’s all for today, we have just finished building own html5 radial gradient element. See you next time, good luck!

HTML5 Image uploader with Jcrop

We have received several inquiries for the last time from our readers with a question – how to upload photos to website. I think that this is an interesting question, and, I decided to lift the veil of this question. But, I think that the basic file upload is a bit boring thing, so, I decided to add an important feature – Cropping. It should be more attractive. Moreover, we are going to use HTML5 FileReader in order to perform cropping with Jcrop (jquery library) at client size. That will get rid of unnecessary steps. In the result – we should get 3-step process: select file -> crop -> upload. During selecting a file, we will check for the file type and size (in order to avoid huge files). Finally, when everything is ready and we have uploaded the cropped image – we will accept (upload) this file into our website (into certain folder). Please pay attention, that GD library is required to process images. If you are ready – let’s start.

It is the very time to test our demo and download the sources:

Live Demo

download in package

Step 1. HTML

Our first step is html markup. first, we have to put styles and scripts in the HEAD section:

<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />

<!-- add scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<script src="js/script.js"></script>

And now, in the BODY section we can put our form:

<div class="bbody">

    <!-- upload form -->
    <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php" onsubmit="return checkForm()">
        <!-- hidden crop params -->
        <input type="hidden" id="x1" name="x1" />
        <input type="hidden" id="y1" name="y1" />
        <input type="hidden" id="x2" name="x2" />
        <input type="hidden" id="y2" name="y2" />

        <h2>Step1: Please select image file</h2>
        <div><input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div>

        <div class="error"></div>

        <div class="step2">
            <h2>Step2: Please select a crop region</h2>
            <img id="preview" />

            <div class="info">
                <label>File size</label> <input type="text" id="filesize" name="filesize" />
                <label>Type</label> <input type="text" id="filetype" name="filetype" />
                <label>Image dimension</label> <input type="text" id="filedim" name="filedim" />
                <label>W</label> <input type="text" id="w" name="w" />
                <label>H</label> <input type="text" id="h" name="h" />
            </div>

            <input type="submit" value="Upload" />
        </div>
    </form>
</div>

I hope that all is clear at this step – this is usual upload form, with hidden and visible fields, once we have selected an image, we will see second step (crop). Once we have cropped necessary area, we can Upload our result.

Step 2. CSS

Now, I would like to give you CSS styles to stylize our form:

css/main.css

.bheader {
    background-color: #DDDDDD;
    border-radius: 10px 10px 0 0;
    padding: 10px 0;
    text-align: center;
}
.bbody {
    color: #000;
    overflow: hidden;
    padding-bottom: 20px;
    text-align: center;

    background: -moz-linear-gradient(#ffffff, #f2f2f2);
    background: -ms-linear-gradient(#ffffff, #f2f2f2);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(#ffffff, #f2f2f2);
    background: -o-linear-gradient(#ffffff, #f2f2f2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')";
    background: linear-gradient(#ffffff, #f2f2f2);
}
.bbody h2, .info, .error {
    margin: 10px 0;
}
.step2, .error {
    display: none;
}
.error {
    font-size: 18px;
    font-weight: bold;
    color: red;
}
.info {
    font-size: 14px;
}
label {
    margin: 0 5px;
}
input {
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    padding: 4px 8px;
    text-align: center;
    width: 70px;
}
.jcrop-holder {
    display: inline-block;
}
input[type=submit] {
    background: #e3e3e3;
    border: 1px solid #bbb;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
    color: #333;
    font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
    padding: 8px 0 9px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    width: 150px;
}
input[type=submit]:hover {
    background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
    box-shadow: inset 0 0 1px 1px #eaeaea;
    color: #222;
    cursor: pointer;
}
input[type=submit]:active {
    background: #d0d0d0;
    -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
    box-shadow: inset 0 0 1px 1px #e3e3e3;
    color: #000;
}

Step 3. JS

Our next step – is javascript. Please review the result code (my comments are below the code):

js/script.js

// convert bytes into friendly format
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};

// check for selected crop region
function checkForm() {
    if (parseInt($('#w').val())) return true;
    $('.error').html('Please select a crop region and then press Upload').show();
    return false;
};

// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
    $('#x1').val(e.x);
    $('#y1').val(e.y);
    $('#x2').val(e.x2);
    $('#y2').val(e.y2);
    $('#w').val(e.w);
    $('#h').val(e.h);
};

// clear info by cropping (onRelease event handler)
function clearInfo() {
    $('.info #w').val('');
    $('.info #h').val('');
};

function fileSelectHandler() {

    // get selected file
    var oFile = $('#image_file')[0].files[0];

    // hide all errors
    $('.error').hide();

    // check for image type (jpg and png are allowed)
    var rFilter = /^(image\/jpeg|image\/png)$/i;
    if (! rFilter.test(oFile.type)) {
        $('.error').html('Please select a valid image file (jpg and png are allowed)').show();
        return;
    }

    // check for file size
    if (oFile.size > 250 * 1024) {
        $('.error').html('You have selected too big file, please select a one smaller image file').show();
        return;
    }

    // preview element
    var oImage = document.getElementById('preview');

    // prepare HTML5 FileReader
    var oReader = new FileReader();
        oReader.onload = function(e) {

        // e.target.result contains the DataURL which we can use as a source of the image
        oImage.src = e.target.result;
        oImage.onload = function () { // onload event handler

            // display step 2
            $('.step2').fadeIn(500);

            // display some basic image info
            var sResultFileSize = bytesToSize(oFile.size);
            $('#filesize').val(sResultFileSize);
            $('#filetype').val(oFile.type);
            $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);

            // Create variables (in this scope) to hold the Jcrop API and image size
            var jcrop_api, boundx, boundy;

            // destroy Jcrop if it is existed
            if (typeof jcrop_api != 'undefined')
                jcrop_api.destroy();

            // initialize Jcrop
            $('#preview').Jcrop({
                minSize: [32, 32], // min crop size
                aspectRatio : 1, // keep aspect ratio 1:1
                bgFade: true, // use fade effect
                bgOpacity: .3, // fade opacity
                onChange: updateInfo,
                onSelect: updateInfo,
                onRelease: clearInfo
            }, function(){

                // use the Jcrop API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];

                // Store the Jcrop API in the jcrop_api variable
                jcrop_api = this;
            });
        };
    };

    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}

There are several common functions in the beginning: bytesToSize, checkForm, updateInfo and clearInfo. They are pretty easy. The next function (fileSelectHandler) is more complex, basically, this is the main function. When we have selected a file (I suppose – image file), we will check this file for Type and Size. You can see here a filter for image formats: png and jpg. Plus, we don’t need very large images, I think that 250kb is more than enough. Then, if everything is ok, we can read our selected file using FileReader::readAsDataURL (html5 function). And, once it has loaded, we can continue: we should display step2 with Preview and info section, and then – we have to initialize (or – reinitialize) Jcrop for our Preview image. This is how it works. Once we have cropped the image, we can click ‘Upload’ button in order to send result to the server.

Step 4. PHP

In this step – we have to accept (and upload) our result photo. I prepared next useful PHP function for you:

upload.php

function uploadImageFile() { // Note: GD library is required for this function

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        $iWidth = $iHeight = 200; // desired image result dimensions
        $iJpgQuality = 90;

        if ($_FILES) {

            // if no errors and size less than 250kb
            if (! $_FILES['image_file']['error'] && $_FILES['image_file']['size'] < 250 * 1024) {
                if (is_uploaded_file($_FILES['image_file']['tmp_name'])) {

                    // new unique filename
                    $sTempFileName = 'cache/' . md5(time().rand());

                    // move uploaded file into cache folder
                    move_uploaded_file($_FILES['image_file']['tmp_name'], $sTempFileName);

                    // change file permission to 644
                    @chmod($sTempFileName, 0644);

                    if (file_exists($sTempFileName) && filesize($sTempFileName) > 0) {
                        $aSize = getimagesize($sTempFileName); // try to obtain image info
                        if (!$aSize) {
                            @unlink($sTempFileName);
                            return;
                        }

                        // check for image type
                        switch($aSize[2]) {
                            case IMAGETYPE_JPEG:
                                $sExt = '.jpg';

                                // create a new image from file
                                $vImg = @imagecreatefromjpeg($sTempFileName);
                                break;
                            case IMAGETYPE_PNG:
                                $sExt = '.png';

                                // create a new image from file
                                $vImg = @imagecreatefrompng($sTempFileName);
                                break;
                            default:
                                @unlink($sTempFileName);
                                return;
                        }

                        // create a new true color image
                        $vDstImg = @imagecreatetruecolor( $iWidth, $iHeight );

                        // copy and resize part of an image with resampling
                        imagecopyresampled($vDstImg, $vImg, 0, 0, (int)$_POST['x1'], (int)$_POST['y1'], $iWidth, $iHeight, (int)$_POST['w'], (int)$_POST['h']);

                        // define a result image filename
                        $sResultFileName = $sTempFileName . $sExt;

                        // output image to file
                        imagejpeg($vDstImg, $sResultFileName, $iJpgQuality);
                        @unlink($sTempFileName);

                        return $sResultFileName;
                    }
                }
            }
        }
    }
}

$sImage = uploadImageFile();
echo '<img src="'.$sImage.'" />';

As you see – we have to check for image size and format at the server’s side too. In the result – we will get double protection (at user side and server side) from unwanted files. Once we have uploaded the image (using move_uploaded_file) – we can crop it (using GD’s functions: imagecreatefromjpeg, imagecreatetruecolor and imagecopyresampled), and – turn result into image file using ‘imagejpeg’ function. Please pay attention – that in the result we will get a small image (which is onle 200×200), so, beside cropping, we also resize the image. I selected next desired size for all incoming photos: 200×200 (this is a good format for .. profile’s avatars as example). Finally – we can display this image on the screen. That’s all.

Live Demo

download in package

Conclusion

We have just created own HTML5 Image uploader with Jcrop. I hope that you like it. It would be nice of you to share our materials with your friends. Good luck and welcome back!

HTML5 Color Picker (canvas)

In our new tutorial we are going to create an easy, but effective color picker using HTML5. I think that you have already seen different jQuery versions of colorpicker, our today’s goal – to create something similar, and even better. In order to make it more unique, there are 5 different colorwheels which you can use. If you are ready – let’s start.

It is the very time to test our demos and download the sources:

Live Demo 1

Live Demo 2

Live Demo 3

Live Demo 4

Live Demo 5

download in package

If you are ready – let’s start coding !

Step 1. HTML

Our first step is html markup:

<!-- preview element -->
<div class="preview"></div>

<!-- colorpicker element -->
<div class="colorpicker" style="display:none">
    <canvas id="picker" var="1" width="300" height="300"></canvas>

    <div class="controls">
        <div><label>R</label> <input type="text" id="rVal" /></div>
        <div><label>G</label> <input type="text" id="gVal" /></div>
        <div><label>B</label> <input type="text" id="bVal" /></div>
        <div><label>RGB</label> <input type="text" id="rgbVal" /></div>
        <div><label>HEX</label> <input type="text" id="hexVal" /></div>
    </div>
</div>

As you see, our color picker consists of two main components: the preview element and the hidden (by default) color picker element. Once we click by preview element – we will display color picker.

Step 2. JS

Our next step – is javascript. Please review our result code:

js/script.js

$(function(){
    var bCanPreview = true; // can preview

    // create canvas and context objects
    var canvas = document.getElementById('picker');
    var ctx = canvas.getContext('2d');

    // drawing active image
    var image = new Image();
    image.onload = function () {
        ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
    }

    // select desired colorwheel
    var imageSrc = 'images/colorwheel1.png';
    switch ($(canvas).attr('var')) {
        case '2':
            imageSrc = 'images/colorwheel2.png';
            break;
        case '3':
            imageSrc = 'images/colorwheel3.png';
            break;
        case '4':
            imageSrc = 'images/colorwheel4.png';
            break;
        case '5':
            imageSrc = 'images/colorwheel5.png';
            break;
    }
    image.src = imageSrc;

    $('#picker').mousemove(function(e) { // mouse move handler
        if (bCanPreview) {
            // get coordinates of current position
            var canvasOffset = $(canvas).offset();
            var canvasX = Math.floor(e.pageX - canvasOffset.left);
            var canvasY = Math.floor(e.pageY - canvasOffset.top);

            // get current pixel
            var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
            var pixel = imageData.data;

            // update preview color
            var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")";
            $('.preview').css('backgroundColor', pixelColor);

            // update controls
            $('#rVal').val(pixel[0]);
            $('#gVal').val(pixel[1]);
            $('#bVal').val(pixel[2]);
            $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]);

            var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
            $('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6));
        }
    });
    $('#picker').click(function(e) { // click event handler
        bCanPreview = !bCanPreview;
    });
    $('.preview').click(function(e) { // preview click
        $('.colorpicker').fadeToggle("slow", "linear");
        bCanPreview = true;
    });
});

As you can see – there are only 64 lines of our colorpicker, so, as usual, in the beginning we create new canvas and context objects, then – draw an color wheel on the context. As you see – there is small switch case to select desired image (of colorwheel), I decided to use a new attribute for canvas object: ‘var’. So, you can easily change this colorwheel with different ‘var’ value, example:

<canvas id="picker" var="1" width="300" height="300"></canvas>
or
<canvas id="picker" var="2" width="300" height="300"></canvas>
or
<canvas id="picker" var="3" width="300" height="300"></canvas>
or
<canvas id="picker" var="4" width="300" height="300"></canvas>
or
<canvas id="picker" var="5" width="300" height="300"></canvas>

Well, finally, we have to add event handlers to next events: mousemove (by picker), click (by picker) and click (by preview). As you remember we have to display and hide color picker when we click at Preview element. In order to achieve it – I use ‘fadeToggle’ jQuery function (which was added in version 1.4.4):

$('.preview').click(function(e) { // preview click
    $('.colorpicker').fadeToggle("slow", "linear");
    bCanPreview = true;
});

When we move our mouse over the Picker object – we should refresh information about current color, and, once we click at the Picker object – we should fix current color (or – disable preview by mousemove):

$('#picker').mousemove(function(e) { // mouse move handler
    if (bCanPreview) {
        // get coordinates of current position
        var canvasOffset = $(canvas).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);

        // get current pixel
        var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
        var pixel = imageData.data;

        // update preview color
        var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")";
        $('.preview').css('backgroundColor', pixelColor);

        // update controls
        $('#rVal').val(pixel[0]);
        $('#gVal').val(pixel[1]);
        $('#bVal').val(pixel[2]);
        $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]);

        var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
        $('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6));
    }
});
$('#picker').click(function(e) { // click event handler
    bCanPreview = !bCanPreview;
});

Step 3. CSS

There are CSS styles of our color picker:

/* colorpicker styles */
.colorpicker {
    background-color: #222222;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 2px 2px 2px #444444;
    color: #FFFFFF;
    font-size: 12px;
    position: absolute;
    width: 460px;
}
#picker {
    cursor: crosshair;
    float: left;
    margin: 10px;
    border: 0;
}
.controls {
    float: right;
    margin: 10px;
}
.controls > div {
    border: 1px solid #2F2F2F;
    margin-bottom: 5px;
    overflow: hidden;
    padding: 5px;
}
.controls label {
    float: left;
}
.controls > div input {
    background-color: #121212;
    border: 1px solid #2F2F2F;
    color: #DDDDDD;
    float: right;
    font-size: 10px;
    height: 14px;
    margin-left: 6px;
    text-align: center;
    text-transform: uppercase;
    width: 75px;
}
.preview {
    background: url("../images/select.png") repeat scroll center center transparent;
    border-radius: 3px;
    box-shadow: 2px 2px 2px #444444;
    cursor: pointer;
    height: 30px;
    width: 30px;
}

Live Demo 1

Live Demo 2

Live Demo 3

Live Demo 4

Live Demo 5

download in package

Conclusion

We have just created own small and effective color picker with HTML5 (canvas). I hope that you like it. I will be glad to see your thanks and comments. Good luck!

HTML5 Game Development – Lesson 10

Finally we can continue the series of articles on game development in HTML5 using canvas. Today I have prepared a new game – SkyWalker. Basically – this is a flight simulator with a plane and multiple enemies. Our goal – to get to the finish line. There are next key features: using sprites for the plane and explosions, possibility to press multiple keys (as example – you can move and attack at the same time), a certain level length, enhanced collision detections (now enemies can damage our plane), life and scores params.

Our previous article you can read here: Developing Your First HTML5 Game – Lesson 9.

Now you can check our demo and download the sources:

Live Demo

download in package

If you are ready – let’s start coding !

Step 1. HTML

As usual (for all canvas-based demos) we have a basic html markup:

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>HTML5 Game Development - Lesson 10 (SkyWalker) | Script Tutorials</title>

        <!-- add styles -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <!-- add scripts -->
        <script src="js/jquery.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <div class="container">
            <canvas id="scene" width="700" height="700" tabindex="1"></canvas>
        </div>
    </body>
</html>

Step 2. JS

Now, please create an empty file ‘script.js’ (in ‘js’ folder) and put this code inside (this is full JS code of our SkyWalker game). I will explain the main functionality below this code.

js/script.js

// inner variables
var canvas, ctx;

// images
var backgroundImage;
var oRocketImage;
var oExplosionImage;
var introImage;
var oEnemyImage;

var iBgShiftY = 9300; //10000 (level length) - 700 (canvas height)
var bPause = true; // game pause
var plane = null; // plane object
var rockets = []; // array of rockets
var enemies = []; // array of enemies
var explosions = []; // array of explosions
var planeW = 200; // plane width
var planeH = 110; // plane height
var iSprPos = 2; // initial sprite frame for plane
var iMoveDir = 0; // move direction
var iEnemyW = 128; // enemy width
var iEnemyH = 128; // enemy height
var iRocketSpeed = 10; // initial rocket speed
var iEnemySpeed = 5; // initial enemy speed
var pressedKeys = []; // array of pressed keys
var iScore = 0; // total score
var iLife = 100; // total life of plane
var iDamage = 10; // damage per enemy plane
var enTimer = null; // random timer for a new enemy
// -------------------------------------------------------------

// objects :
function Plane(x, y, w, h, image) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.image = image;
    this.bDrag = false;
}
function Rocket(x, y, w, h, speed, image) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.speed = speed;
    this.image = image;
}
function Enemy(x, y, w, h, speed, image) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.speed = speed;
    this.image = image;
}
function Explosion(x, y, w, h, sprite, image) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.sprite = sprite;
    this.image = image;
}
// -------------------------------------------------------------
// get random number between X and Y
function getRand(x, y) {
    return Math.floor(Math.random()*y)+x;
}

// Display Intro function
function displayIntro() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.drawImage(introImage, 0, 0,700, 700);
}

// Draw Main scene function
function drawScene() {

    if (! bPause) {
        iBgShiftY -= 2; // move main ground
        if (iBgShiftY < 5) { // Finish position
            bPause = true;

            // draw score
            ctx.font = '40px Verdana';
            ctx.fillStyle = '#fff';
            ctx.fillText('Finish, your score: ' + iScore * 10 + ' points', 50, 200);
            return;
        }

        // process pressed keys (movement of plane)
        processPressedKeys();

        // clear canvas
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        // draw background
        ctx.drawImage(backgroundImage, 0, 0 + iBgShiftY, 700, 700, 0, 0, 700, 700);

        // draw plane
        ctx.drawImage(plane.image, iSprPos*plane.w, 0, plane.w, plane.h, plane.x - plane.w/2, plane.y - plane.h/2, plane.w, plane.h);

        // draw rockets
        if (rockets.length > 0) {
            for (var key in rockets) {
                if (rockets[key] != undefined) {
                    ctx.drawImage(rockets[key].image, rockets[key].x, rockets[key].y);
                    rockets[key].y -= rockets[key].speed;

                    // if a rocket is out of screen - remove it
                    if (rockets[key].y < 0) {
                        delete rockets[key];
                    }
                }
            }
        }

        // draw explosions
        if (explosions.length > 0) {
            for (var key in explosions) {
                if (explosions[key] != undefined) {
                    // display explosion sprites
                    ctx.drawImage(explosions[key].image, explosions[key].sprite*explosions[key].w, 0, explosions[key].w, explosions[key].h, explosions[key].x - explosions[key].w/2, explosions[key].y - explosions[key].h/2, explosions[key].w, explosions[key].h);
                    explosions[key].sprite++;

                    // remove an explosion object when it expires
                    if (explosions[key].sprite > 10) {
                        delete explosions[key];
                    }
                }
            }
        }

        // draw enemies
        if (enemies.length > 0) {
            for (var ekey in enemies) {
                if (enemies[ekey] != undefined) {
                    ctx.drawImage(enemies[ekey].image, enemies[ekey].x, enemies[ekey].y);
                    enemies[ekey].y -= enemies[ekey].speed;

                    // remove an enemy object if it is out of screen
                    if (enemies[ekey].y > canvas.height) {
                        delete enemies[ekey];
                    }
                }
            }
        }

        if (enemies.length > 0) {
            for (var ekey in enemies) {
                if (enemies[ekey] != undefined) {

                    // collisions with rockets
                    if (rockets.length > 0) {
                        for (var key in rockets) {
                            if (rockets[key] != undefined) {
                                if (rockets[key].y < enemies[ekey].y + enemies[ekey].h/2 && rockets[key].x > enemies[ekey].x && rockets[key].x + rockets[key].w < enemies[ekey].x + enemies[ekey].w) {
                                    explosions.push(new Explosion(enemies[ekey].x + enemies[ekey].w / 2, enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage));

                                    // delete enemy, rocket, and add +1 to score
                                    delete enemies[ekey];
                                    delete rockets[key];
                                    iScore++;
                                }
                            }
                        }
                    }

                    // collisions with plane
                    if (enemies[ekey] != undefined) {
                        if (plane.y - plane.h/2 < enemies[ekey].y + enemies[ekey].h/2 && plane.x - plane.w/2 < enemies[ekey].x + enemies[ekey].w && plane.x + plane.w/2 > enemies[ekey].x) {
                            explosions.push(new Explosion(enemies[ekey].x + enemies[ekey].w / 2, enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage));

                            // delete enemy and make damage
                            delete enemies[ekey];
                            iLife -= iDamage;

                            if (iLife <= 0) { // Game over
                                bPause = true;

                                // draw score
                                ctx.font = '38px Verdana';
                                ctx.fillStyle = '#fff';
                                ctx.fillText('Game over, your score: ' + iScore * 10 + ' points', 25, 200);
                                return;
                            }
                        }
                    }
                }
            }
        }

        // display life and score
        ctx.font = '14px Verdana';
        ctx.fillStyle = '#fff';
        ctx.fillText('Life: ' + iLife + ' / 100', 50, 660);
        ctx.fillText('Score: ' + iScore * 10, 50, 680);
    }
}

// Process Pressed Keys function
function processPressedKeys() {
    if (pressedKeys[37] != undefined) { // 'Left' key
        if (iSprPos > 0) {
            iSprPos--;
            iMoveDir = -7;
        }
        if (plane.x - plane.w / 2 > 10) {
            plane.x += iMoveDir;
        }
    }
    else if (pressedKeys[39] != undefined) { // 'Right' key
        if (iSprPos < 4) {
            iSprPos++;
            iMoveDir = 7;
        }
        if (plane.x + plane.w / 2 < canvas.width - 10) {
            plane.x += iMoveDir;
        }
    }
}

// Add Enemy function (adds a new enemy randomly)
function addEnemy() {
    clearInterval(enTimer);

    var randX = getRand(0, canvas.height - iEnemyH);
    enemies.push(new Enemy(randX, 0, iEnemyW, iEnemyH, - iEnemySpeed, oEnemyImage));

    var interval = getRand(1000, 4000);
    enTimer = setInterval(addEnemy, interval); // loop
}

// Main Initialization
$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    // load background image
    backgroundImage = new Image();
    backgroundImage.src = 'images/levelmap.jpg';
    backgroundImage.onload = function() {
    }
    backgroundImage.onerror = function() {
        console.log('Error loading the background image.');
    }

    introImage = new Image();
    introImage.src = 'images/intro.jpg';

    // initialization of empty rocket
    oRocketImage = new Image();
    oRocketImage.src = 'images/rocket.png';
    oRocketImage.onload = function() { }

    // initialization of explosion image
    oExplosionImage = new Image();
    oExplosionImage.src = 'images/explosion.png';
    oExplosionImage.onload = function() { }

    // initialization of empty enemy
    oEnemyImage = new Image();
    oEnemyImage.src = 'images/enemy.png';
    oEnemyImage.onload = function() { }

    // initialization of plane
    var oPlaneImage = new Image();
    oPlaneImage.src = 'images/plane.png';
    oPlaneImage.onload = function() {
        plane = new Plane(canvas.width / 2, canvas.height - 100, planeW, planeH, oPlaneImage);
    }

    $(window).keydown(function (evt){ // onkeydown event handle
        var pk = pressedKeys[evt.keyCode];
        if (! pk) {
            pressedKeys[evt.keyCode] = 1; // add all pressed keys into array
        }

        if (bPause && evt.keyCode == 13) { // in case of Enter button
            bPause = false;

            // start main animation
            setInterval(drawScene, 30); // loop drawScene

            // and add first enemy
            addEnemy();
        }
    });

    $(window).keyup(function (evt) { // onkeyup event handle
        var pk = pressedKeys[evt.keyCode];
        if (pk) {
            delete pressedKeys[evt.keyCode]; // remove pressed key from array
        }
        if (evt.keyCode == 65) { // 'A' button - add a rocket
            rockets.push(new Rocket(plane.x - 16, plane.y - plane.h, 32, 32, iRocketSpeed, oRocketImage));
        }
        if (evt.keyCode == 37 || evt.keyCode == 39) {
            // revert plane sprite to default position
            if (iSprPos > 2) {
                for (var i = iSprPos; i >= 2; i--) {
                    iSprPos = i;
                    iMoveDir = 0;
                }
            } else {
                for (var i = iSprPos; i <= 2; i++) {
                    iSprPos = i;
                    iMoveDir = 0;
                }
            }
        }
    });

    // when intro is ready - display it
    introImage.onload = function() {
        displayIntro(); // Display intro once
    }
});

In the main initialization the script loads all necessary images (level map, intro screen, rocket, explosion sprite, enemy and plane sprite). Then, in order to handle with multiple pressed keys we have to use Array (pressedKeys) to keep all pressed keys (then, during rendering of the main scene, we will use this array to manipulate with our plane), and finally, once the Intro page is loaded – we display intro screen. One of important moments – handling of multiple pressed keys, look at this code:

var pressedKeys = []; // array of pressed keys

$(window).keydown(function (evt){ // onkeydown event handle
    var pk = pressedKeys[evt.keyCode];
    if (! pk) {
        pressedKeys[evt.keyCode] = 1; // add all pressed keys into array
    }
});

$(window).keyup(function (evt) { // onkeyup event handle
    var pk = pressedKeys[evt.keyCode];
    if (pk) {
        delete pressedKeys[evt.keyCode]; // remove pressed key from array
    }
});

This technique allows us to handle multiple keys. Well, during rendering of the main scene we draw next objects: level background, the main plane, rockets (of our plane), enemies and explosions. Once we hit an enemy – we draw explosion sprite at the last place of the enemy. And finally, our opponents are not harmless, as soon as they touch our plane – they explode and cause damage to our aircraft. And, if our life value is under zero – game over. To implement collisions and explosions, I used the following code:

if (plane.y - plane.h/2 < enemies[ekey].y + enemies[ekey].h/2 && plane.x - plane.w/2 < enemies[ekey].x + enemies[ekey].w && plane.x + plane.w/2 > enemies[ekey].x) {
    explosions.push(new Explosion(enemies[ekey].x + enemies[ekey].w / 2, enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage));

    // delete enemy and make damage
    delete enemies[ekey];
    iLife -= iDamage;

    if (iLife <= 0) { // Game over
        bPause = true;

        // draw score
        ctx.font = '38px Verdana';
        ctx.fillStyle = '#fff';
        ctx.fillText('Game over, your score: ' + iScore * 10 + ' points', 25, 200);
        return;
    }
}

Step 3. Custom graphics

enemy.png, explosion.png, intro.jpg, levelmap.jpg, plane.png, rocket.png

All used images are available in our package

Live Demo

download in package

Conclusion

Are you like our new SkyWalker game? I will be glad to see your thanks and comments. Good luck!

How to turn jQuery accordion into CSS3 accordion

Have you ever used ordinary accordion plugins in your projects, I believe that yes, and, most of them use javascript to work (or jQuery). Usually we use such plugins (accordions) to build a promo with images, a little photo gallery, or in case if we have to build an advertisement with a list of product features. We did some research and came to the conclusion that sometimes we don’t need to use any script in order to build accordions. We can just use the power of CSS3. We can handle the OnClick event and use custom animation.

download sources

I prepared three versions with accordions. For the first demonstration we use jQuery to build an accordion. I selected liteAccordion jQuery plugin (http://nicolahibbert.com/demo/liteAccordion/) as a accordion plugin for out test purposes. Look how it works:

Live Demo

It looks nice, doesn’t it? Let’s review HTML markup of this page:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>How to turn jQuery accordion into pure CSS3 accordion | Script Tutorials</title>

        <!-- CSS files -->
        <link href="css/layout.css" rel="stylesheet" />
        <link href="css/liteaccordion.css" rel="stylesheet" />

        <!-- jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <!-- jQuery easing -->
        <script src="js/jquery.easing.1.3.js"></script>

        <!-- liteAccordion jQuery library -->
        <script src="js/liteaccordion.jquery.js"></script>

        <script>
            $(document).ready(function(){
                $('#js_version').liteAccordion({
                    theme : 'dark',
                    rounded : true,
                    enumerateSlides : true,
                    firstSlide : 1,
                    linkable : true,
                    easing: 'easeInOutSine'
                });
            });
        </script>
    </head>
    <body>

        <h1>jQuery accordion (liteAccordion) version</h1>
        <div id="js_version" class="accordion">
            <ol>
                <li data-slide-name="slide1">
                    <h2><span>Slide One</span></h2>
                    <div>
                        <img src="images/1.jpg" alt="Slide One" />
                    </div>
                </li>
                <li data-slide-name="slide2">
                    <h2><span>Slide Two</span></h2>
                    <div>
                        <img src="images/2.jpg" alt="Slide Two" />
                    </div>
                </li>
                <li data-slide-name="slide3">
                    <h2><span>Slide Three</span></h2>
                    <div>
                        <img src="images/3.jpg" alt="Slide Three" />
                    </div>
                </li>
                <li data-slide-name="slide4">
                    <h2><span>Slide Four</span></h2>
                    <div>
                        <img src="images/4.jpg" width="768" alt="Slide Four" />
                    </div>
                </li>
                <li data-slide-name="slide5">
                    <h2><span>Slide Five</span></h2>
                    <div>
                        <img src="images/5.jpg" alt="Slide Five" />
                    </div>
                </li>
            </ol>
            <noscript>
                <p>Please enable JavaScript to get the full experience.</p>
            </noscript>
        </div>

    </body>
</html>

In the header we added all the necessary libraries and styles (jQuery, jquery.easing and liteAccordion library) as well as accordion initialization code. In the body section we can see basic accordion structure (OL-LI list) with slides. I think that this is one of usual structures for accordions.

Now, I think that it is the very time to start turning it into pure CSS3 accordion. In the beginning – we have to remove all JS scripts from our page, we can remove liteaccordion.css as well. We are going to prepare our own CSS styles. Also, we have to add <A> links to the headers of our slides (because we should be able to switch between slides). In the result we should get something like that:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- CSS files -->
        <link href="css/layout.css" rel="stylesheet" />
        <link href="css/main.css" rel="stylesheet" />
    </head>
    <body>

        <h1>Pure CSS3 accordion version without animation</h1>
        <div class="accordion css3accordion">
            <span id="slide1"></span>
            <span id="slide2"></span>
            <span id="slide3"></span>
            <span id="slide4"></span>
            <span id="slide5"></span>
            <ol>
                <li class="slide1">
                    <a href="#slide1"><h2><span>Slide One</span></h2></a>
                    <div>
                        <img src="images/1.jpg" alt="Slide One" />
                    </div>
                </li>
                <li class="slide2">
                    <a href="#slide2"><h2><span>Slide Two</span></h2></a>
                    <div>
                        <img src="images/2.jpg" alt="Slide Two" />
                    </div>
                </li>
                <li class="slide3">
                    <a href="#slide3"><h2><span>Slide Three</span></h2></a>
                    <div>
                        <img src="images/3.jpg" alt="Slide Three" />
                    </div>
                </li>
                <li class="slide4">
                    <a href="#slide4"><h2><span>Slide Four</span></h2></a>
                    <div>
                        <img src="images/4.jpg" alt="Slide Four" />
                    </div>
                </li>
                <li class="slide5">
                    <a href="#slide5"><h2><span>Slide Five</span></h2></a>
                    <div>
                        <img src="images/5.jpg" alt="Slide Five" />
                    </div>
                </li>
            </ol>
        </div>

    </body>
</html>

As you can see – I added several <span> objects. By default – all of them are hidden, but we have to use them in order to handle onclick events. Now, we are ready to start writing own styles for our CSS3 accordion. Firstly, we have to define styles for our parent object and inner spans:

/* CSS3 accordion */
.css3accordion {
    border: 9px solid #353535;
    border-radius: 6px;
    padding: 5px 5px 6px 0;
    background: #030303;
    height: 320px;
    width: 960px;

    /* CSS3 shadows */
    -webkit-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* hide first level spans */
.css3accordion > span {
    display: none
}

As I told – they are hidden. Now we can define styles for our slides and headers:

/* main accordion styles and slides */
.css3accordion ol {
    height: 100%;
    list-style: none;
    overflow: hidden;
    position: relative;
}
.css3accordion li {
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 48px;

    /* CSS3 transition for slides */
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

.css3accordion li a {
    display: block;
    float: left;
    height: 320px;
    position: relative;
    width: 48px;
}

/* slide headers */
.css3accordion  h2 {
    font-size: 16px;
    font-weight: normal;
    height: 48px;
    left: 0;
    line-height: 265%;
    margin: 0;
    position: absolute;
    top: 0;
    width: 320px;
    z-index: 1;

    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(-100%) rotate(-90deg);
    -webkit-transform-origin: right top;
    -moz-transform: translateX(-100%) rotate(-90deg);
    -moz-transform-origin: right top;
    -ms-transform: translateX(-100%) rotate(-90deg);
    -ms-transform-origin: right top;
    -o-transform: translateX(-100%) rotate(-90deg);
    -o-transform-origin: right top;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top;
}
.css3accordion h2 span {
    background-color: #353535;
    border-radius: 4px;
    color: #fff;
    display: block;
    margin-top: 5px;
    padding-right: 10%;
    text-align: right;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.css3accordion h2 span:hover {
    background-color: #353535;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
/* inner slide content */
.css3accordion li div {
    margin-left: 5px;
    padding-left: 48px;
}

Now I’d like to show you how to display a counter object in every header. I’m going to use :after pseudo element. I hope that you know that :after selector inserts content after the selected element, so we can do something like that:

/* 'counter' object */
.css3accordion h2 span:after {
    color: #080808;
    font-weight: bold;
    left: 10%;
    position: absolute;
    text-shadow: -1px 1px 0 #555555;
    top: 10%;

    /* CSS3 rotate for 'counter' */
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
/* 'counter' values */
li.slide1  h2 span:after {
    content: "1";
}
li.slide2  h2 span:after {
    content: "2";
}
li.slide3  h2 span:after {
    content: "3";
}
li.slide4  h2 span:after {
    content: "4";
}
li.slide5  h2 span:after {
    content: "5";
}

Finally, in order to complete our accordion we have to implement onclick behavior:

/* onclick behavior */
#slide1:target ~ ol li.slide1,
#slide2:target ~ ol li.slide2,
#slide3:target ~ ol li.slide3,
#slide4:target ~ ol li.slide4,
#slide5:target ~ ol li.slide5 {
    width: 768px;
}
#slide1:target ~ ol li.slide1 span,
#slide2:target ~ ol li.slide2 span,
#slide3:target ~ ol li.slide3 span,
#slide4:target ~ ol li.slide4 span,
#slide5:target ~ ol li.slide5 span {
    background: #353535;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}

That’s all, our own CSS3-based accordion is complete! You can check it in action:

CSS3 accordion demo

But that’s not all for today, as a bonus, I prepared third demo for you with animated accordion.

animated accordion demo

In order to do it I recommend disable onclick behavior, and apply new animation:

/* auto animation */
.css3accordion li {
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 25.0s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 25.0s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

.css3accordion li:nth-child(2) {
    -webkit-animation-delay: 5.0s;
    -moz-animation-delay: 5.0s;
}
.css3accordion li:nth-child(3) {
    -webkit-animation-delay: 10.0s;
    -moz-animation-delay: 10.0s;
}
.css3accordion li:nth-child(4) {
    -webkit-animation-delay: 15.0s;
    -moz-animation-delay: 15.0s;
}

.css3accordion li:nth-child(5) {
    -webkit-animation-delay: 20.0s;
    -moz-animation-delay: 20.0s;
}

@-webkit-keyframes anim_slides {
    0% {
        width: 48px;
    }
    20% {
        width: 768px;
    }
    40% {
        width: 48px;
    }
    100% {
        width: 48px;
    }
}
@-moz-keyframes anim_slides {
    0% {
        width: 48px;
    }
    20% {
        width: 768px;
    }
    40% {
        width: 48px;
    }
    100% {
        width: 48px;
    }
}

Conclusion

Now that is all for today. We have just created three different demos: the first one with jQuery, the second and the third – with pure CSS3. I hope that you like it. Good luck!