HTML5 là thế hệ kế tiếp của ngôn ngữ lập trình nổi tiếng HTML (Hyper Text Markup Language), "nguyên liệu chính" trong quá trình thiết kế website. Phiên bản trước (HTML4) ra đời cách đây 13 năm đã trở nên quá cũ kĩ và lạc hậu, không đáp ứng được nhu cầu giải trí của người dùng Internet hiện nay. Các lập trình viên nếu muốn chèn các đoạn mã video, game, nhạc… vào website sẽ buộc phải sử dụng thêm Flash hoặc Java.
Tải giáo trình học html 5 và css 3 tại đây:
https://vfo.vn/t/showthread.php?2790-Giáo-trình-học-html-5-và-css-3&p=6048#post6048
0. Công nghệ css3
https://vfo.vn/t/showthread.php?15-Google-mừng-sinh-nhật-bằng...-bóng-bay&p=19#post19
Demo: https://vfo.vn
1. Xem Demo: Audioburst Animation 9elements.com/io/projects/html5/canvas/ - Audioburst Animation
3. Xem Demo: Blob Sallad blobsallad.se/ - Demo: Blob Sallad
4. Xem Demo: Demo: Bomomo bomomo.com/ - Demo: Bomomo
5. Xem Demo: Bubbles 3.paulhamill.com/node/39 - Xem Demo: Bubbles
Tải giáo trình học html 5 và css 3 tại đây:
https://vfo.vn/t/showthread.php?2790-Giáo-trình-học-html-5-và-css-3&p=6048#post6048
0. Công nghệ css3
https://vfo.vn/t/showthread.php?15-Google-mừng-sinh-nhật-bằng...-bóng-bay&p=19#post19
Demo: https://vfo.vn
1. Xem Demo: Audioburst Animation 9elements.com/io/projects/html5/canvas/ - Audioburst Animation
– Những khối tròn cùng chuyển động không ngừng cùng các khối màu sắc hấp dẫn,
miêu tả hoạt động của con trỏ chuột kèm theo các hiệu ứng âm thanh sôi nổi.
2. Xem demo Demo:Ball Pool Demo:Ball Pool
Hãy giữ chuột và “rê” liên tục để những vòng tròn theo đó tuôn ra
ào ạt tràn ngập màn hình, người xem sẽ thấy được sự năng động của HTML5.
3. Xem Demo: Blob Sallad blobsallad.se/ - Demo: Blob Sallad
– Thử “ném” trái bóng đáng yêu này và để nó chạy lung tung trong trình duyệt web,
hiệu ứng này cho thấy HTML5 hoạt động rất mượt.
4. Xem Demo: Demo: Bomomo bomomo.com/ - Demo: Bomomo
– Mô tả cách các nguyên tử chuyển động trên nền tảng HTML5.
Bạn cũng có thể “sai khiến” chúng làm bất cứ việc gì theo ý bạn.
5. Xem Demo: Bubbles 3.paulhamill.com/node/39 - Xem Demo: Bubbles
– Người dùng có thể tạo ra những quả bong bóng nước 3D đầy màu sắc bằng cách
click chuột vào nền xanh với số lượng trái bóng là vô hạn.
Canvas Cartoon Animation – Các nhân vật hoạt hình ngộ nghĩnh sẽ xuất hiện
và giới thiệu cho người xem những gì HTML5 có thể làm được.
randomibis.com/coolclock/ - Coolclock – Sự kết hợp của HTML5 và JavaScript, những chiếc đồng hồ
nhiều thể loại và đủ các múi giờ trên Trái đất được thể hiện dưới vô vàn màu sắc khác nhau.
lo2k.net/v7/lab/flickr/login - Flickr PS3 Slideshow – Một slideshow được trình chiếu ngay trên trình duyệt web
của bạn. Chỉ cần đăng nhập Flickr, mọi thứ sẽ hiện ra trước mắt!
addyosmani.com/resources/canvasphoto/ - Interactive Polaroid – Biến trình duyệt thành một “màn hình cảm ứng đa chạm”, người dùng có thể
tương tác với các bức ảnh y như trên những chiếc điện thoại thời thượng.
js-fireworks.appspot.com/ - JS Fireworks – Thêm một sự kết hợp tuyệt vời khác của JavaScript và HTML5. Bất kì
dòng chữ nào người dùng viết ra sẽ hiện lên dần dần sau màn pháo hoa đẹp mắt.
chiptune.com/kaleidoscope/ - Kaleidoscope – Hiệu ứng kính vạn hoa muôn màu được thể hiện đẹp mắt và huyền ảo
trên nền web, tốc độ biến chuyển tùy theo click chuột của bạn!
spielzeugz.de/html5/liquid-particles.html - Liquid Particles – Các hạt màu sắc nhạy cảm sẽ chuyển động theo thao tác di chuột của bạn.
Click chuột để những hạt này bị đẩy “tung tóe” ra các hướng khác nhau.
webdev.stephband.info/parallax_demos.html - Parallax – Phong cách xếp giấy Origami của Nhật Bản được thể hiện dưới hiệu ứng
của nền tảng HTML5. Cùng cảm nhận sự khác biệt.
chiptune.com/starfield/starfield.html - Starfield – Điều khiển một trận “mưa sao băng” trên bầu trời bằng cách giữ và
di chuyển về các hướng khác nhau.
feedtank.com/labs/html_canvas/ - Particle Animation – Dòng chữ bạn viết sẽ lần lượt được hình thành bởi hiệu ứng phân rã
và quy nạp ấn tượng.
Nebula Cloud – HTML5 cho thấy khả năng thể hiện màu sắc và chuyển động tốt hơn Flash nhiều.
Trong ảnh là hiệu ứng tinh vân cực hoành tráng và lạ mắt.
Video Destruction – Đỉnh cao của hiệu ứng đồ họa trên trình duyệt, chỉ với một click
chuột, bạn có thể “đập vỡ” một video đang chạy!
xs4all.nl/%7Epeterned/3d/ - Canvas3D and Flickr – Cách trình chiếu ảnh Flickr khác trên trình duyệt, album ảnh
của bạn sẽ được thể hiện dưới dạng 3D xoay chiều.
andrew-hoyer.com/experiments/cloth - Cloth Simulation – Lật tung, kéo, giũ, rung… một tấm lưới tùy thích theo ý của bạn.
Các hiệu ứng vật lí cũng được thể hiện rất chân thực và rõ nét.
deanm.github.com/pre3d/monster.html - Evolving Monster - Quan sát sự tiến hóa thành một sinh vật phức tạp,
quá trình chỉ có thể thực hiện tốt trên HTML5.
addyosmani.com/resources/googlebox/ - Google Giftbox – Tìm kiếm Google trong chiếc hộp 3D xoay lung tung
theo con trỏ chuột của bạn.
gyu.que.jp/jscloth/touch.html - JS Touch – Trong tương lai, đây sẽ là cách người dùng có thể xem thiết bị một cách rõ
nét nhất khi có thể ngắm nghía ở mọi góc độ với độ phân giải cực cao.
Sửa lần cuối:
