48 brutalnych demonstracji HTML5 / CSS3

animacja na płótnie animacja HTML5 Prezentacja: 48 pokazów Potencjalnych zabójstw Flash

Biorę ten post, aby odpowiedzieć na pytanie, które zadałeś ostatnio w komentarzach do artykułu:

Kiedy jest dobry moment, aby zacząć w pełni projektować w HTML5?

Cóż, szczerze mówiąc, to zależy od celu, na który celujesz. Jeśli nie planujesz, aby odwiedzający korzystali z Internet Explorera (np. Strony z oprogramowaniem dla komputerów Mac), zacznij od razu z HTML5, ale jeśli chcesz, aby ludzie z IE zobaczyli Twoją witrynę, lepiej poczekaj ...

Na wstępie, dobrze po skoku, 48 pokazów HTML5, które są niesamowite i zasługują na obejrzenie. Wielkie jest mało.

Źródło | HongKiat

aanimacja dźwięku

Wygodna i fantastyczna animacja stworzona za pomocą płótna HTML5 i tagu audio.

audioburst animacja HTML5 Prezentacja: 48 pokazów Potential Flash Killing

Basen z piłeczkami

Prezentowane podczas ostatniego wydarzenia Google I / O, to demo pokazuje, jak dynamiczny może być HTML5.

Basen z piłeczkami Prezentacja HTML5: 48 Potencjalnych pokazów zabijania Flash

SAŁATKA BLOB

Stworzenie z HTML5, które by cię zadowolić.

blob sallad HTML5 Showcase: 48 pokazów potencjalnych zabójstw Flash

bummo

Dzięki Bomomo możesz obserwować różne ruchy atomowe symulowane w HTML5.

bomomo HTML5 Showcase: 48 pokazów potencjalnie zabijających Flasha

Piłka przeglądarki

Zaskocz tą kulką HTML5 obsługującą wszystkie przeglądarki.

przeglądarka ball Prezentacja HTML5: 48 pokazów potencjalnych zabójstw Flash

Bubbles

Baw się, tworząc nieskończone pływające bąbelki w różnych kolorach.

bubble Prezentacja HTML5: 48 pokazów potencjalnych zabójstw Flash

Animacja na płótnie

Prosty i zabawny rysunek HTML5, który pomoże Ci zrozumieć, co potrafi element canvas HTML5.

animacja na płótnie animacja HTML5 Prezentacja: 48 pokazów Potencjalnych zabójstw Flash

Zegar chłodzący

Ładny, konfigurowalny zegar analogowy zbudowany przez HTML5 i JavaScript.

coolclock HTML5 Showcase: 48 pokazów potencjalnych zabójstw flashowych

Pokaz slajdów Flickr PS3

Wyświetlaj zdjęcia z serwisu Flickr za pomocą pokazu slajdów w stylu PS3 w przeglądarce internetowej.

flickr ps3 slideshow Prezentacja HTML5: 48 pokazów potencjalnie zabijających Flasha

Interaktywny polaroid

Interaktywne demo, które działa podobnie do interfejsu wielodotykowego.

interaktywna prezentacja polaroid HTML5: 48 pokazów Potential Flash Killing

JS Fajerwerki

Ciesz się chwilą fajerwerków z preferowaną grawitacją i szybkością, obsługiwaną przez HTML5 i Javascript.

js fireworks Prezentacja HTML5: 48 pokazów potencjalnie zabijających Flasha

Kalejdoskop

Bardzo piękny i futurystyczny kalejdoskop HTML5.

Kalejdoskop HTML5 Prezentacja: 48 pokazów Potential Flash Killing

Płynne cząsteczki

Wrażliwa animacja cząstek, która reaguje na ruch myszy.

płynne cząsteczki Prezentacja HTML5: 48 pokazów Potential Flash Killing

Hipnotyzujący

Kolejne wrażliwe i wyjątkowe demo HTML5, które pokazuje, jak pobliskie elementy reagują na ruch myszy.

mesmerizer HTML5 Showcase: 48 pokazów potencjalnie zabijających Flasha

Chmura mgławicy

Zgub się z tą cudowną mgławicą HTML5.

mgławica w chmurze Prezentacja HTML5: 48 pokazów Potencjalnych zabójstw Flash

Paralaksa

Zobacz wszystkie kształty 2D w perspektywie równoległej.

parallax HTML5 Showcase: 48 pokazów potencjalnych zabójstw Flash

Animacja cząstek

Elegancka animacja cząstek HTML5, która może zostać utworzona w preferowanej wiadomości.

Animacja cząstek elementarnych Prezentacja HTML5: 48 pokazów potencjalnie zabijających Flasha

Rozpiętość

Zagub się w tej niekończącej się animacji rozprzestrzeniania się.

rozpowszechnianie prezentacji HTML5: 48 pokazów potencjalnych zabójstw Flash

Starfield

Bardzo fajna animacja pola gwiezdnego HTML5, która zmienia kierunek i prędkość w zależności od ruchu myszy.

Starfield HTML5 Showcase: 48 pokazów potencjalnych zabójstw Flash

Zniszczenie wideo

Jedno kliknięcie, aby odtworzyć wideo.

niszczenie wideo Prezentacja HTML5: 48 pokazów potencjalnych zabójstw Flash

Waveform

Zwróć uwagę, jak porusza się fala płótna HTML5, zmieniając jej amplitudę, długość fali, szerokość itp.

Waveform HTML5 Showcase: 48 pokazów potencjalnie zabijających Flasha

Efekt 3D

Pod wrażeniem animacji na płótnie? To więcej, co element canvas HTML5 może zrobić i nazywa się to efektem 3D. Deweloper może polegać na elemencie canvas, DOM i JavaScript, aby stworzyć efekt 3D, który później można przekształcić w animację 3D lub grę.

Canvas3D i Flickr

Przeżyj zupełnie nowe wrażenia 3D dzięki strumieniowi zdjęć Flickr.

Canvas3d i flickr Prezentacja HTML5: 48 pokazów potencjalnie zabijających Flasha

Symulacja tkaniny

Realistyczna symulacja tkaniny oparta na HTML5.

Symulacja tkaniny Prezentacja HTML5: 48 pokazów Potencjalnych zabójstw Flash

Ewoluujący potwór

Obserwuj, jak potwór ewoluuje w skomplikowane stworzenie, jednym z jego twórców jest HTML5.

ewoluująca prezentacja potworów HTML5: 48 pokazów potencjalnych zabójstw flashowych

Pudełko na prezenty Google

Gigantyczna wyszukiwarka Google jest prezentowana w 3D, grywalnym widoku.

prezentacja google Giftbox HTML5: 48 pokazów potencjalnych zabójstw Flash

JS Dotyk

Wysokiej jakości, realistyczna prezentacja „3D na 2D Canvas”.

js touch HTML5 Showcase: 48 pokazów potencjalnie zabijających Flasha

Prezentacja danych

Chociaż element canvas HTML5 może być używany do tworzenia animacji i efektów 3D, można go również zaimplementować do prezentowania danych matematycznych.

gnuplot

Gnuplot, aplikacja do rysowania danych w wersji HTML5.

gnuplot HTML5 Showcase: 48 pokazów potencjalnych zabójstw Flash

GRRAPH

RGraph zapewnia szeroki zakres prezentacji danych, takich jak wykres słupkowy, pasek postępu i tradycyjny wykres radarowy.

rgraph HTML5 Showcase: 48 pokazów potencjalnie zabijających Flasha

Aplikacja internetowa

Ostatecznie, korzystając ze wszystkich możliwości połączonych w HTML5 i innym języku, można stworzyć interaktywną aplikację lub grę zbliżoną do aplikacji Flash.

PłótnoFarba

Zobacz, jak brat Microsoft Paint pojawia się w twojej przeglądarce internetowej, a jego ojciec jest HTML5.

Canvaspaint HTML5 Showcase: 48 pokazów potencjalnie zabijających Flasha

PłótnoMol

Aplikacja naukowa, która została stworzona, aby pomóc Ci zrozumieć strukturę określonego elementu ziemi.

Canvasmol HTML5 Showcase: 48 pokazów potencjalnie zabijających Flasha

Konstruktor kreskówek

Narysuj ciekawy obraz animowany za pomocą tego minimalnego i interaktywnego narzędzia do tworzenia kreskówek.

kreator kreskówek Prezentacja HTML5: 48 pokazów potencjalnych zabójstw Flash

Przeciągnij wszystko tutaj

Przeciągnij wszystko, co możesz przeciągnąć w wersji demonstracyjnej, aby wyświetlić szczegóły.

przeciągnij cokolwiek tutaj. Prezentacja HTML5: 48 pokazów potencjalnych zabójstw Flash

Szkic Gartic

Oryginalna aplikacja HTML5, która pozwala tworzyć podstawowe rysunki, które można zapisać w innym formacie obrazu, takim jak jpeg lub png.

gartic sketch HTML5 Showcase: 48 pokazów Potential Flash Killing

Szkic fizyczny

Narysuj, co chcesz, i zobacz, jak reagują z symulowaną grawitacją.

physicsketch Prezentacja HTML5: 48 pokazów potencjalnych zabójstw flashowych

Sketchpad

Potężna aplikacja do rysowania HTML5, która umożliwia precyzyjne rysowanie i edytowanie obrazu.

Sketchpad HTML5 Showcase: 48 pokazów potencjalnie zabijających Flasha

Pogawędka

Aplikacja internetowa, która potwierdza położenie geograficzne wiadomości pogodowych pozyskanych z Twittera, tworząc w ten sposób „społeczną mapę pogody” opartą na płótnie, dość banalną (jak twierdzi autor), ale interesującą.

Smalltalk HTML5 Showcase: 48 pokazów potencjalnie zabijających Flasha

gra

3 Znudzony

Nigdy nie będziesz się nudzić, jeśli będziesz mógł uniknąć setek pocisków HTML5 w ciągu następnej sekundy.

3bored HTML5 Showcase: 48 pokazów potencjalnych zabójstw Flash

Breakout

Odbij piłkę, aby rozbić wszystkie cegły.

Breakout HTML5 Showcase: 48 pokazów potencjalnych zabójstw Flash

Płótno

Niezupełnie gra, ale pokazuje, jak HTML5 można wykorzystać do stworzenia gry przeglądarkowej First Person Shooting.

Canvascape HTML5 Showcase: 48 pokazów potencjalnie zabijających Flasha

Złap to

Ile piłek możesz uniknąć, aby wygrać kwadrat HTML5?

catch it HTML5 Showcase: 48 pokazów potencjalnych zabójstw Flash

Reakcja łańcuchowa

Połącz wybuch, aby osiągnąć cel, nie uzależniaj się.

reakcja łańcuchowa Prezentacja HTML5: 48 pokazów potencjalnych zabójstw flashowych

sześcian

Zagraj w Tetris w 3D, widok z góry na dół.

cubeout HTML5 Showcase: 48 pokazów potencjalnych zabójstw flashowych

etchaFizyka

Narysuj przedmiot, aby przenieść piłkę do gwiazdy, nie zapomnij o grawitacji.

etchaphysics HTML5 Showcase: 48 pokazów pokazujących potencjalne zabijanie przez Flash

Układanka

Klikaj, obracaj i upuszczaj elementy układanki, aby rozwiązać tę opartą na HTML5 układankę.

jigsaw puzzle Prezentacja HTML5: 48 pokazów Potential Flash Killing

slide Puzzle

Przejdź do zwycięstwa, kolejna gra HTML5 stworzona, by wycisnąć z twojego umysłu sok.

slide puzzle Prezentacja HTML5: 48 pokazów Potential Flash Killing

Ta sama gra

Usuń określoną grupę, aby sparować inną grupę w tym samym kolorze, a ostatecznie otrzymasz zwycięstwo.

ta sama gra HTML5 Showcase: 48 wersji demonstracyjnych Potential Flash Killing

Tetris

Jedna z najbardziej klasycznych gier przywrócona do życia dzięki HTML5.

tetris HTML5 Showcase: 48 pokazów potencjalnych zabójstw Flash

Torus

Kolejna gra Tetris w wersji pseudo-3D.

Torus HTML5 Showcase: 48 pokazów potencjalnie zabijających Flasha