48 bản trình diễn HTML5 / CSS3 tàn bạo

canvas hoạt hình hoạt hình HTML5 Giới thiệu: 48 Bản trình diễn diệt Flash tiềm năng

Tôi lấy bài đăng này để trả lời một câu hỏi mà bạn đã hỏi gần đây trong phần bình luận của một bài báo:

Khi nào là thời điểm tốt để bắt đầu thiết kế hoàn toàn bằng HTML5?

Vâng, thành thật mà nói, nó phụ thuộc vào mục tiêu bạn đang nhắm đến. Nếu bạn không có kế hoạch để khách truy cập của mình sử dụng Internet Explorer (ví dụ: trang phần mềm Mac) thì hãy bắt đầu ngay với HTML5, nhưng nếu bạn cần những người có IE xem trang web của mình, thì tốt hơn bạn nên đợi ...

Về lối vào, sau 48 bản demo của HTML5, thật tuyệt vời và đáng được xem. Tuyệt vời là ít.

Nguồn | HồngKiat

aHoạt hình Âm thanh Burst

Một hình ảnh động thoải mái và tuyệt vời được tạo bằng canvas và thẻ âm thanh của HTML5.

audioburst animation Giới thiệu HTML5: 48 Bản trình diễn diệt Flash tiềm năng

Bể bóng

Được giới thiệu trong sự kiện Google I / O vừa qua, bản trình diễn này cho bạn thấy HTML5 có thể năng động như thế nào.

bi-a HTML5 Trưng bày: 48 Bản trình diễn giết chết Flash tiềm năng

sa lát blob

Một sinh vật được tạo ra từ HTML5 sẽ làm hài lòng bạn.

blob sallad Giới thiệu HTML5: 48 Bản trình diễn diệt Flash tiềm năng

bomomo

Với Bomomo, bạn có thể quan sát các chuyển động nguyên tử khác nhau được mô phỏng bằng HTML5.

bomomo HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Bóng trình duyệt

Kinh ngạc với quả bóng HTML5 'trình duyệt chéo' này.

trình duyệt bóng trình duyệt HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Bubbles

Hãy vui vẻ bằng cách tạo ra vô số bong bóng nổi với màu sắc khác nhau.

bong bóng Giới thiệu HTML5: 48 Bản trình diễn diệt Flash tiềm năng

Canvas Hoạt hình Hoạt hình

Một phim hoạt hình HTML5 đơn giản và hài hước giúp bạn hiểu phần tử canvas của HTML5 có thể làm gì.

canvas hoạt hình hoạt hình HTML5 Giới thiệu: 48 Bản trình diễn diệt Flash tiềm năng

Làm mát

Một đồng hồ tương tự đẹp, có thể tùy chỉnh được xây dựng bởi HTML5 và JavaScript.

coolclock HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Trình chiếu Flickr PS3

Xem ảnh Flickr của bạn với trình chiếu kiểu PS3 trong trình duyệt web.

trình chiếu flickr ps3 Trình chiếu HTML5: 48 Bản trình diễn diệt Flash tiềm năng

Polaroid tương tác

Một bản demo tương tác hoạt động khá giống với giao diện cảm ứng đa điểm.

Polaroid HTML5 Showcase tương tác: 48 Bản trình diễn diệt Flash tiềm năng

Pháo hoa JS

Tận hưởng khoảnh khắc pháo hoa với trọng lực và tốc độ ưa thích của bạn, được hỗ trợ bởi HTML5 và Javascript.

js pháo hoa Giới thiệu HTML5: 48 Bản trình diễn diệt Flash tiềm năng

Cảnh thay đổi luôn

Kính vạn hoa HTML5 rất đẹp và tương lai.

Kaleidoscope HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Hạt lỏng

Hoạt ảnh hạt nhạy cảm phản ứng dựa trên chuyển động chuột của bạn.

các hạt lỏng HTML5 Trưng bày: 48 Bản trình diễn giết chết Flash tiềm năng

thuốc thôi miên

Một bản demo HTML5 nhạy cảm và nổi bật khác cho thấy cách các phần tử lân cận phản ứng với chuyển động chuột của bạn.

mesmerizer HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Đám mây tinh vân

Lạc lối với tinh vân HTML5 tuyệt vời này.

đám mây tinh vân Giới thiệu HTML5: 48 Bản trình diễn giết chết Flash tiềm năng

Thị sai

Xem tất cả các hình dạng 2D ở góc độ song song.

parallax HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Hoạt ảnh hạt

Một hoạt ảnh hạt HTML5 trang nhã có thể tạo thành thông điệp ưa thích của bạn.

hoạt hình hạt Trình diễn HTML5: 48 Bản trình diễn giết chết Flash tiềm năng

Lây lan

Lạc lối với hình ảnh động lan truyền vô tận này.

lan truyền Giới thiệu HTML5: 48 Bản trình diễn giết chết Flash tiềm năng

Starfield

Một hình ảnh động trường sao HTML5 rất thú vị có thể thay đổi hướng và tốc độ dựa trên chuyển động chuột của bạn.

starfield HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Phá hủy Video

Một cú nhấp chuột để bùng nổ một video đang phát.

phá hủy video Giới thiệu HTML5: 48 Bản trình diễn diệt Flash tiềm năng

Waveform

Lưu ý cách sóng canvas của HTML5 di chuyển bằng cách thay đổi biên độ, bước sóng, chiều rộng, v.v.

waveform HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Hiệu ứng 3D

Ấn tượng với hoạt ảnh canvas? Đó là nhiều thứ khác mà phần tử canvas của HTML5 có thể làm và nó được gọi là hiệu ứng 3D. Nhà phát triển có thể dựa vào phần tử canvas, DOM và JavaScript để tạo hiệu ứng 3D, sau này có thể được phát triển thành hoạt hình hoặc trò chơi 3D.

Canvas3D và Flickr

Có trải nghiệm 3D hoàn toàn mới với dòng ảnh của Flickr.

canvas3d và flickr HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Mô phỏng vải

Một mô phỏng vải dựa trên HTML5 thực tế.

mô phỏng vải HTML5 Trưng bày: 48 Bản trình diễn diệt Flash tiềm năng

Quái vật đang tiến hóa

Quan sát một con quái vật tiến hóa thành một sinh vật phức tạp, một trong những người tạo ra nó là HTML5.

quái vật đang phát triển Giới thiệu HTML5: 48 Bản trình diễn giết chết Flash tiềm năng

Hộp quà tặng của Google

Công cụ tìm kiếm khổng lồ Google được trình bày dưới dạng 3D, có thể chơi được.

google giftbox HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

J.S.Touch

Trưng bày '3D trên 2D Canvas' chất lượng cao và chân thực.

js touch Hiển thị HTML5: 48 Bản trình diễn diệt Flash tiềm năng

Trình bày dữ liệu

Trong khi phần tử canvas của HTML5 có thể được sử dụng để tạo hoạt ảnh và hiệu ứng 3D, nó cũng có thể được triển khai để trình bày dữ liệu toán học.

gnuplot

Gnuplot, một ứng dụng vẽ biểu đồ dữ liệu trong phiên bản HTML5.

gnuplot HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

đồ thị

RGraph cung cấp nhiều dạng trình bày dữ liệu như biểu đồ thanh, thanh tiến trình và biểu đồ radar truyền thống.

rgraph HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Ứng dụng Web

Cuối cùng, sử dụng tất cả các khả năng được kết hợp bởi HTML5 và các ngôn ngữ khác, người ta có thể tạo ứng dụng hoặc trò chơi tương tác gần với ứng dụng Flash.

VảiSơn

Chứng kiến ​​người anh em của Microsoft Paint xuất hiện trong trình duyệt web của bạn, và cha của anh ấy là HTML5.

canvaspaint Trình diễn HTML5: 48 Bản trình diễn diệt Flash tiềm năng

VảiMol

Một ứng dụng khoa học được xây dựng để giúp bạn hiểu cấu trúc của một số nguyên tố trái đất.

canvasmol HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Người xây dựng phim hoạt hình

Vẽ hình ảnh hoạt hình thú vị với trình tạo phim hoạt hình tương tác và tối thiểu này.

Trình tạo phim hoạt hình Trình diễn HTML5: 48 Bản trình diễn giết chết Flash tiềm năng

Kéo bất cứ thứ gì vào đây

Kéo bất kỳ thứ gì bạn có thể kéo trong bản trình diễn để hiển thị chi tiết.

kéo bất cứ thứ gì vào đây Chế độ trưng bày HTML5: 48 Bản trình diễn giết chết Flash tiềm năng

Phác thảo Gartic

Một ứng dụng HTML5 gốc cho phép bạn tạo một số bản vẽ cơ bản có thể được lưu thành định dạng hình ảnh khác nhau như jpeg hoặc png.

gartic sketch HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Phác Thảo Vật Lý

Vẽ bất cứ thứ gì bạn thích và xem cách chúng phản ứng với trọng lực mô phỏng.

vật lýketch Hiển thị HTML5: 48 Bản trình diễn diệt Flash tiềm năng

Sketchpad

Một ứng dụng vẽ HTML5 mạnh mẽ cho phép bạn vẽ và chỉnh sửa hình ảnh của mình một cách chính xác.

sketchpad HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Smalltalk

Một ứng dụng web xác nhận vị trí địa lý của thông báo liên quan đến thời tiết có được từ Twitter, do đó hình thành chúng thành bản đồ 'thời tiết xã hội' dựa trên canvas, khá tầm thường (như tác giả đã nêu) nhưng thú vị.

smalltalk HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Trò chơi

3 Chán

Bạn sẽ không bao giờ cảm thấy nhàm chán nếu bạn có thể tiếp tục né hàng trăm dấu đầu dòng HTML5 trong giây tiếp theo.

3bored HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Breakout

Rebound bóng để phá vỡ tất cả các viên gạch.

breakout HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

bức tranh sơn dầu

Không hẳn là một trò chơi, nhưng nó thể hiện cách HTML5 có thể được sử dụng để phát triển trò chơi trình duyệt Bắn súng góc nhìn thứ nhất.

canvascape HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Bắt nó

Bạn có thể né bao nhiêu quả bóng để có được hình vuông HTML5 chiến thắng?

nắm bắt nó Hiển thị HTML5: 48 Bản trình diễn diệt Flash tiềm năng

Kiếm vật gì

Hãy xâu chuỗi vụ nổ để đạt được mục đích, đừng nghiện.

phản ứng dây chuyền Giới thiệu HTML5: 48 Bản trình diễn giết chết Flash tiềm năng

khối lập phương

Chơi Tetris ở chế độ xem 3D, từ trên xuống.

Hình khối HTML5 Trưng bày: 48 Bản trình diễn giết chết Flash tiềm năng

etchaVật lý

Vẽ mục để di chuyển quả bóng đến ngôi sao, đừng quên về trọng lực.

etchaphysics HTML5 Showcase: 48 Bản trình diễn giết chết Flash tiềm năng

Trò chơi lắp hình

Nhấp, xoay và thả các mảnh ghép để giải câu đố ghép hình dựa trên HTML5 này.

trò chơi ghép hình HTML5 Showcase: 48 Bản trình diễn Flash Killing tiềm năng

Trượt Puzzle

Trượt để chiến thắng, một trò chơi HTML5 khác được xây dựng để vắt kiệt sức lực của bạn.

slide puzzle HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

Cùng một trò chơi

Loại bỏ một số nhóm nhất định để có được một nhóm khác được ghép nối cùng màu và cuối cùng bạn sẽ được trao chiến thắng.

cùng một trò chơi Giới thiệu HTML5: 48 Bản trình diễn giết chết Flash tiềm năng

Tetris

Một trong những trò chơi cổ điển nhất được HTML5 làm sống lại.

Tetris HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng

hình xuyến

Tuy nhiên, một trò chơi Tetris khác trong phiên bản 3D giả.

Torus HTML5 Showcase: 48 Bản trình diễn diệt Flash tiềm năng


7 bình luận, để lại của bạn

Để lại bình luận của bạn

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu bằng *

*

*

  1. Chịu trách nhiệm về dữ liệu: Miguel Ángel Gatón
  2. Mục đích của dữ liệu: Kiểm soát SPAM, quản lý bình luận.
  3. Hợp pháp: Sự đồng ý của bạn
  4. Truyền thông dữ liệu: Dữ liệu sẽ không được thông báo cho các bên thứ ba trừ khi có nghĩa vụ pháp lý.
  5. Lưu trữ dữ liệu: Cơ sở dữ liệu do Occentus Networks (EU) lưu trữ
  6. Quyền: Bất cứ lúc nào bạn có thể giới hạn, khôi phục và xóa thông tin của mình.

  1.   kẹo mút dijo

    TETRIS KHÔNG ĐI, TÔI ĐƯA HAI MẢNH VÀO VÀ ĐỨNG NHƯNG CUỘC SỐNG RẤT RẤT MÁT

  2.   Elisa dijo

    Tôi thích trang này ... ngoại trừ trò chơi đầu tiên. I love you Fran =)
    Tạm biệt một nụ hôn với thế giới quá tốtooooooo

  3.   Tiếng Helsic dijo

    Không thể tin được, ngoạn mục. Tôi không thể tin rằng sự phát triển web đã tiến xa đến mức nào!

  4.   Joe vega dijo

    Tôi không biết tại sao những tài nguyên này lại được gán cho HTML5, đây là Javascript thuần túy, trước khi Flash nổi lên, với Javascript, bạn có thể làm được tất cả những điều này, có một nghiên cứu ở Barcelona đã tạo ra một số trang web vào thời điểm đó, tất cả trong javascript đến nỗi tôi đã học được từ họ và thiết kế một cặp đôi với những quả bóng nảy và tất cả, tôi hoàn toàn mất chúng và vẫn hối tiếc Tôi không nhớ tên của studio, nó giống như you2 hoặc 2you2 ở năm 98 hoặc lâu hơn.

  5.   ASDF dijo

    Joe Vega …… nó cho thấy rằng bạn không biết gì về HTML5… .lol

  6.   Joe vega dijo

    Bạn có thể không có bất kỳ ý tưởng html5 đẫm máu nào, đó là sự thật, nhưng các bạn nhầm con gà trống với chuồng gà và không phân biệt ngôn ngữ với môi trường. Tôi thách bạn làm một ví dụ như ví dụ ở đây mà không sử dụng Javascript, chỉ với html5, và bạn sẽ hiểu ý tôi trong bài đăng mà tôi đã xóa. Hơn nữa, tôi đang xem mã nguồn của các ví dụ và có một số ví dụ có thể dễ dàng thực hiện mà không cần gắn nó qua html5.
    Html5 đó mang lại nhiều cải tiến và những thứ tạo điều kiện rất nhiều là đúng, nhưng điều tuyệt vời được hiển thị trên trang này là Javascript.

  7.   santiago barcheta dijo

    Tôi quan tâm đến việc thực hiện các bài thuyết trình kiểu này ... bạn có hướng dẫn hoặc trang có tài nguyên không ??? Cảm ơn bạn!!!