Project Description

Đây là tập hợp những demo ví dụ về HTML5 do công ty gumi Việt Nam tạo ra.
Đây còn là trang mà nhân viên chúng tôi nghiên cứu chuyên sâu về những khác biệt giữa trang web cũ(Html4)khi sử dụng Canvas, JavaScript và CSS3 trong những ví dụ demo của HTML5
Trong khi lập trình HTML5、không cần sử dụng plug-in, chỉ cần dùng CSS và javaScript làm trung tâm chính để viết những đoạn mã đơn giản là có thể xử lý HTML.
Hãy xem và khám phá tiềm năng mới trong công nghệ kỹ thuật web mới sau này. Quý khách nên sử dụng trình duyệt Chrome, Safari, FireFox mới nhất để xem ứng dụng của HTML5 tốt nhất.

Danh sách các ví dụ của HTML5

CSS3animation
Hiệu ứng hình ảnh 3D của JavaScript
3D cube
3D Slicebox
Thư viện hiệu ứng 『D3.js』(Data Driven Document)
pingpong
TYPHOON

1. Hiệu ứng web với CSS3

Demo CSS3 Animation
Với thuộc tính transition trong CSS giúp chúng ta dễ dàng tạo ra những hiệu ứng hoạt hình rất thú vị mà đến javascript. Thuộc tính này được định nghĩa trong CSS3. Nó giúp trang web của chúng ta chạy mượt mà hơn. Tuy nhiên thuộc tính này vẫn còn hạn chế là khi áp dụng cho các trình duyệt yếu như IE từ phiên bản 9 trở xuống đều không hỗ trợ. , nhưng đối với những trình duyệt hiện đại như hiện nay thì dùng CSS3 sẽ bớt nặng nhọc một phần cho các trang web khi cần tạo ra các hiệu ứng đơn giản.

Với bản demo này chúng tôi đã dùng thuộc tính transition của CSS3 để tạo ra hiệu ứng xoay các hộp từ hình vuông chuyển thánh hình tròn với từng đặc tính riêng biệt như: ease,ease-in,ease-out,ease-in-out,linear,cubic-bezier. Với thời gian thực thi khác nhau khi chúng ta rê chuột lên khung chứa các phần tử trên.

View Demo

2. DÙNG JAVASCRIPT ĐỂ TẠO HIỆU ỨNG 3D

Hiệu ứng 3D hiện đang là 1 trong những hiệu ứng được yêu thích nhất, với những phần mềm chuyên nghiệp có thể tạo ra nhiều sản phẩm tuyệt vời, nhưng giá những phần mềm này thường khá đắt. Tuy nhiên, ngôn ngữ Javascript cung cấp khả năng tạo ra các hiệu ứng 3D với chi phí thấp và chất lượng khá. Chúng tôi có thể tạo ra nhiều hiệu ứng 3D với Javascript, những đoạn script này có trên những thư viện Javascript được dùng cho nhiều mục đích sử dụng.
Chú ý: Chỉ chạy được hiệu ứng 3D trên Internet Explorer 9 & 10, Chrome, Firefox, Safari.

DEMO1 – 3D cube

Demo 3D cube
Hiệu ứng 3D rất được yêu chuộng hiện nay, bằng những công cụ chuyên nghiệp người ta có thể tạo ra nhiều sản phẩm có giá trị, tuy nhiên chi phí để có được những công cụ đó rất cao. Tuy nhiên với Javascript một ngôn ngữ web động được cung cấp miễn phí mà vẫn đem lại hiệu quả cao. Với Javascript chúng ta có thể tạo ra những hiệu ứng 3D như mong muốn, nó có thể tìm thấy rất nhiều thư viện viết sẵn trên mạng hỗ trợ cho dựng hình 3D với nhiều mục đích khác nhau.

Với demo này chúng tôi dùng thư viện k3d để tao hiệu ứng 3D. Chỉ cần một tấm hình nhưng với kỹ thuật dựng hình 3D nó đã tạo ra hình ảnh của một khối hộp. Dùng chuột nhấp lên để dừng và nhấp thêm lần nữa để tiếp tục xoay.

View Demo

DEMO2 – 3D Slicebox

Demo 3D Slicebox
Đây là một plugin về slider 3D được viết bằng ngôn ngữ Javascript.
Plugin này dùng để tạo hiệu ứng 3D khi chúng slide hình thay vì slide 2D bình thường không tạo thú vị.
View Demo

3. D3.js – Dùng thư viện D3 để mô phỏng dữ liệu

D3.js (D3 – Data Driven Document) là một thư viện Javascript khá nổi tiếng, nó thường được dùng để mô phỏng hay thống kê dữ liệu trên trang web. Dữ liệu có thể ở dạng ARRAY, XML, JSON, CSV… với cụ phân tích data mạnh như D3 chúng ta có thể vẽ hầu như bất kỳ hình ảnh nào từ dữ liệu gốc của chúng ta. Đặc biệt là vẽ các biểu đồ rất thích hợp.

Demo 1: Mô phỏng Pingpong

Demo pingpong
Hình bên cạnh chúng tôi đã dùng thư viện D3 để vẽ bong bóng chứa text bên trong. Nội dung text được soạn trong file JSON: trong file này chúng tôi đã định nghĩa ba nhóm với 3 màu sắc và nội dung khác nhau.
View Demo

Demo 2: Mô phỏng Typhoon

Demo typhoon
Hình bên cạnh chúng tôi đã dùng thư viện D3 để vẽ nên hình tròn với 6 bán kính khác nhau và chiều xoay cũng khác nhau tạo hiệu ứng xoay hình xoắn ốc. Nội dung định nghĩa hình tròn được lưu bên trong đối tượng ARRAY: chứa bán kính hình tròn, độ rộng hình vuông tương ứng với hình tròn với tốc độ xoay khác nhau.
View Demo
Contact Us

Liên hệ

Xin hãy liên lạc với chúng tôi nếu bạn có những thắc mắc về Phát triển Labo・Phát triển offshore・Lập trình HTML5・Ứng dụng Smartphone.

Contact Us