Category Archives: HTML 5

JavaScript – Booklet – part 001.

Today I tested the Booklet jQuery tool, because I did not find too much data on this tool on the internet.
This help me to display the content on the web in a flipbook layout.
In this tutorial, I will only present a book of web page sizes, changing the color of the cover and adding text.
This tool also allows other features, but I will return to the right time.
It was built using the jQuery library and is licensed under the MIT license.
You can read documentation and download it from here.
I download and unarchive this tool to default folder booklet-master.
Because this tool come with a index.html file, I create a index2.html file and I add my source code.
To change the default brown cover I change this line of code from this file jquery.booklet.latest.css ( from src folder ).
.booklet .b-page-cover {padding:0; width:100%; height:100%; background:#dddddd;}
This is my index2.html file and result is a book with some text.

Posted in All, HTML 5, javascript. Tagged with , , , , , .

JavaScript – Matter.js the 2D physics engine .

The tutorial today is about Matter.js – 2D physics engine for the web.
Let’s try one simple example.
You need a folder named project with index.html file and a js folder with index.js file.
The content of index.html is:

The content of index.js file from js folder is:

Let’s see the result of this script with web tool.
You can try all demos.

Posted in All, HTML 5, javascript. Tagged with , , , , , .

JavaScript – filter an array with Google Chrome.

This problem can be easily resolved in the Google Chrome browser.
You must press F12 to start Chrome Developer Tools.
Then add the java script to the Console.
The filter method is part of the ECMAScript 5.
The result array contains the values that are not ‘Blue’.

Posted in All, HTML 5, javascript. Tagged with , , , , , .

Circle bubble with CSS and HTML5 – part 001.

This is a simple example of circle bubble with CSS and HTML 5.
It is a circle with a blue color that raise similar to where on the surface of a liquid.
The visual effect is very pleasant and the source code is simple.
You need to create a index.html file with this source code:

The next step is to make a style.css file in same folder with the HTML 5 file.
The source code of this file is this:

The result of this example can be see on my codepen example here .

Posted in All, HTML 5, Programming. Tagged with , , , , .

A simple sphere with Three.js .

This tutorial is about how to add a simple wireframe sphere into your webpage using the a javascript 3D library named three.js .
This 3D library and some demo and examples can be found here.
The tutorial for today is let you to know how to deal with a simple object.
First you need to make a folder named project.
Into this folder create two folder named js and css.
Into the project create a index.html file and add this content:

Make a file named style.css into css folder and add this:

This wi
Into js folder create a file named index.js and add this source code:

This java script file follow some steps to make the wireframe sphere:

  • make the scene;
  • set the camera;
  • create the renderer space;
  • add the renderer space to HTML document;
  • create sphere
  • add one material ;
  • make a wireframe from geometry variable;
  • create wireframe object;
  • create a line like wireframe object;
  • deal with line material;
  • add line to the scene;
  • set the position of camera;
  • create the render function to animate the content;
  • run all with render function.

The result is something like this:

Some changes can be used into this example to see how is working.
You can remove the css folder and style file but you need to remove this line from index.html file:

The sphere variable can be added into java script source code:

This will make some change into the render canvas.

Posted in All, HTML 5, javascript, Programming, web, WebGL. Tagged with , , , , , , .