Project Description

In the HTML5, the dependency on external plugins had been reduced. The features are more based on scripts such as HTML, CSS, Javascript etc.
Besides, a HTML error shall be handled easier compared to previous HTML version with more markups available to replace the scripting. With the development process is more visible, it helps to encourage the usage of HTML5.
In this laboratory, we would like to show some movements that make the difference from the traditional website display by using the HTML5, JavaScript and CSS scripting.
4 samples created with the scripts of html5, JavaScript, CSS and CSS3.

1. CSS3アニメーション

Demo CSS3 Animation
HTML5 coding, one of the best ways to make the coding easier and organized can be made by using the CSS attributes. CSS helps to create some interesting animation easily without flooded with heavy JavaScript. With the latest version of CSS3, It does really help our site runs smoother than expected.

However, this attribute is limited when applied to the browsers IE 9 and below. But for modern browsers which use CSS3 today it will help to reduce the size of content heavily and create simple effects easily.

In this demo, we use CSS3 transition properties to create an effect of turning the switch box from a square in circle with 6 different individual characteristics without JavaScript, such as: ease, ease-in, ease-out, ease-in-out , linear, cubic-bezier.
Besides, a random response will be created when mouse moves over on them.
Remarks: Available for browsers such as Internet Explorer 9 & 10, Chrome, Firefox, and Safari etc. only.

View Demo

2. JavaScriptの3D効果を作成する

3D effect is one of the favorite tools around currently, with professional tools more valuable products can be created, but the cost to get those tools require costly. However, the JavaScript language providing with low cost but high efficiency output. With JavaScript we can create the desired 3D effect, there are scripts available on the 3D library for many different purposes.
Remarks: Available for browsers such as Internet Explorer 9 & 10, Chrome, Firefox, and Safari etc. only.

DEMO1 – 3D cube

Demo 3D cube
In this demo, a picture will be used with 3D rendering technique to create the image of cube.
Use your mouse to click to stop on and click again to start the rotation.
View Demo

DEMO2 – 3D Slicebox

Demo 3D Slicebox
This is a plugin for 3D slider that written in JavaScript. This plugin is used to create the 3D effect when creating slide movements instead of using normal 2D sliding styles.
View Demo

3. D3.js – Library used for simulation data

D3.js (D3 – Data Driven Document) is a popular JavaScript library, it is often used to simulate or statistical data on the site. Data can be in the form of ARRAY, XML, JSON, and CSV … D3 is a powerful data analysis tools as we can draw almost any image for any data. It is especially suitable to draw diagrams.

Demo 1: Pingpong movement simulation

Demo pingpong
With the D3 library we manage to put text inside a bubble and make random movement by using the JSON file. In this demo, 3 groups of different colors (and content) created for the movement demo.
View Demo

Demo 2: Typhoon simulation

Demo typhoon
By using the Array object of D3 library, circular data is defined and restored repeatedly. The data includes the radius circle and square width to create few circles that rotating with different speeds.

In this demo, 6 different rotations created and are with different speeds, demonstrating a virtual typhoon effect.

Contents of circular definitions are stored within the object ARRAY: contains radius circle and square width corresponds to a circle with different rotation speeds.

View Demo
Contact Us

Send your inquiries here

Please do not hesitate to ask about our "gumi Labo" development, offshore development, HTML5 Coding service, smartphone apps development services here.

Contact Us