Więc słyszałeś wszystkie plotki o HTML5 miałby przejąć Adobe Flash. Podczas gdy większość społeczności internetowej spiera się, czy jest to możliwe czy nie, na pewno zastanawiasz się, co sprawia, że HTML5 jest tak potężny, że nawet gigantyczna firma Apple chce go użyć do zastąpienia Flasha.
Dlatego właśnie istnieje ten post, nie będziemy mówić o tym, co HTML5 może zrobić, ale pokażemy na żywo dema magicznych rzeczy, które HTML5 może osiągnąć z innymi językami, takimi jak JavaScript, więc przygotuj się na inspirację.
Uwaga: Ponieważ HTML5 nie jest w pełni obsługiwany przez niektóre przeglądarki internetowe, takie jak Internet Explorer, zdecydowanie zaleca się używanie przeglądarki Firefox do oglądania wszystkich poniższych dem HTML5.
Animacja
Element canvas w HTML5 jest czynnikiem decydującym o tym, że HTML5 zastępuje niektóre animacje Flash. Pozwala on na budowanie dynamicznego, skryptowego renderowania kształtów 2D i obrazów bitmapowych za pomocą Javascript, co w innym znaczeniu oznacza animację, którą można kontrolować.
Audioburst Animation
Wygodna i fantastyczna animacja stworzona za pomocą płótna HTML5 i znacznika audio.
Ball Pool
Pokazane na ostatnim wydarzeniu Google I/O, to demo pokazuje, jak dynamiczny może być HTML5.
Blob Sallad
Wywołane przez HTML5 stworzenie, które cię zadowoli.
Bomomo
Dzięki Bomomo możesz obserwować różne ruchy atomowe symulowane za pomocą HTML5.
Browser Ball
Zostań zaskoczony tą „międzybranżową” piłką HTML5.
Bąbelki
Zabaw się, tworząc niekończące się pływające bąbelki o różnych kolorach.
Animacja kreskówki na płótnie
Prosta i zabawna kreskówka HTML5, która pomoże ci zrozumieć, co potrafi element canvas HTML5.
Coolclock
Przyjemny, konfigurowalny zegar analogowy zbudowany przez HTML5 i JavaScript.
Flickr PS3 Slideshow
Przeglądaj swoje zdjęcia z Flickr z pokazem slajdów w stylu PS3 w przeglądarce internetowej.
Interaktywny Polaroid
Interaktywne demo, które działa całkiem podobnie do interfejsu wielodotykowego.
JS Fajerwerki
Podziwiaj moment fajerwerków z preferowaną grawitacją i prędkością, zasilany przez HTML5 i Javascript.
Kalejdoskop
Bardzo piękny i futurystyczny kalejdoskop HTML5.
Płynne cząsteczki
Czuła animacja cząsteczek, która reaguje na ruchy myszy.
Mesmerizer
Kolejne wrażliwe i znakomite demo HTML5, które pokazuje, jak pobliskie elementy reagują na ruchy myszy.
Mgławica
Zagub się w tej cudownej mgławicy HTML5.
Paralaksa
Wyświetl wszystkie kształty 2D w perspektywie równoległej.
Animacja cząstek
Elegancka animacja cząstek HTML5, którą można uformować w preferowaną wiadomość.
Rozrzut
Zgub się dzięki tej niekończącej się animacji rozrzutu.
Gwiezdne pole
Bardzo fajna animacja HTML5 gwiezdnego pola, która zmieniałaby kierunek i prędkość na podstawie ruchu myszy.
Niszczenie wideo
Jedno kliknięcie, aby wysadzić w powietrze odtwarzane wideo.
Forma fali
Obserwuj, jak porusza się fala płótna HTML5, zmieniając jej amplitudę, długość fali, szerokość itp.
Efekt 3D
Nadmiernie męczy Cię animacja płótna? To jest więcej, co element canvas w HTML5 może zrobić, i to jest nazywane efektem 3D. Programista może polegać na elemencie canvas, DOM i JavaScript, aby stworzyć efekt 3D, który później może być rozwinięty w animację 3D lub grę.
Canvas3D i Flickr
Zdobądź zupełnie nowe doświadczenie 3D z fotostreamem Flickr.
Symulacja tkaniny
Realistyczna, oparta na HTML5 symulacja tkaniny.
Ewoluujący potwór
Obserwuj potwora ewoluującego w skomplikowane stworzenie, którego jednym z twórców jest HTML5.
Google Giftbox
Gigantyczna wyszukiwarka Google prezentowana jest w trójwymiarowym, grywalnym widoku.
JS Touch
Wysokiej jakości i realistyczny pokaz „3D on 2D Canvas”.
Prezentacja danych
Podczas gdy element canvas w HTML5 może być używany do tworzenia animacji i efektów 3D, może być również zaimplementowany do prezentacji danych matematycznych.
Gnuplot
Gnuplot, aplikacja do wykreślania danych w wersji HTML5.
RGraph
RGraph zapewnia szeroki zakres prezentacji danych, takich jak wykres słupkowy, pasek postępu i tradycyjny wykres radarowy.
Web Application
W końcu, wykorzystując wszystkie możliwości połączone przez HTML5 i inne langauge, można stworzyć interaktywną aplikację lub grę, która jest zbliżona do aplikacji Flash.
CanvasPaint
Witaj brat Microsoft Paint wchodzi do twojej przeglądarki internetowej, a jego ojcem jest HTML5.
CanvasMol
Aplikacja naukowa, która została stworzona, aby pomóc Ci zrozumieć strukturę niektórych elementów ziemi.
Cartoon Builder
Narysuj interesujący obrazek z kreskówki za pomocą tego minimalnego i interaktywnego programu do tworzenia kreskówek.
Drag Anything Here
Przeciągnij wszystko, co można przeciągnąć w demo, aby pokazać szczegóły.
Gartic Sketch
Oryginalna aplikacja HTML5, która pozwala na wykonanie kilku podstawowych rysunków, które można zapisać w różnych formatach obrazu, takich jak jpeg lub png.
PhysicSketch
Narysuj co tylko chcesz i zobacz jak reagują na symulowaną grawitację.
Sketchpad
Potężna aplikacja rysunkowa HTML5, która umożliwia rysowanie i edycję obrazu w precyzyjny sposób.
Smalltalk
Aplikacja webowa, która potwierdza położenie geograficzne wiadomości związanych z pogodą pozyskanych z Twittera, formując je w ten sposób w opartą na płótnie mapę „społecznej pogody”, dość trywialną (jak twierdzi autor), ale ciekawą.
Gra
3Bored
Nigdy nie będziesz się nudzić, jeśli będziesz w stanie unikać setek pocisków HTML5 w następnej sekundzie.
Breakout
Odbij piłkę, aby rozbić wszystkie cegły.
Canvascape
Nie do końca gra, ale demonstruje jak HTML5 może być użyty do stworzenia gry przeglądarkowej typu First Person Shooting.
Złap to
Ile piłek możesz ominąć, aby zdobyć zwycięski kwadrat HTML5?
Reakcja łańcuchowa
Łącz eksplozje, aby osiągnąć cel, nie uzależniaj się.
Cubeout
Graj w Tetrisa w 3D, widok z góry na dół.
etchaPhysics
Narysuj element, aby przenieść piłkę do gwiazdy, nie zapomnij o grawitacji.
Układanka
Klikaj, obracaj i upuszczaj elementy układanki, aby rozwiązać tę opartą na HTML5 układankę.
Układanka
Przesuwaj się do zwycięstwa, kolejna gra HTML5, która została stworzona, aby wycisnąć sok z twojego umysłu.
Same Game
Usuń pewną grupę, aby uzyskać inną grupę sparowaną w tym samym kolorze, a w końcu otrzymasz zwycięstwo.
Tetris
Jedna z najbardziej klasycznych gier przywróconych do życia przez HTML5.
Torus
Kolejna gra Tetris w wersji pseudo-3D.
Zakończenie
Jakie są ograniczenia HTML5? W tym momencie nie możemy zdecydować, ale dzięki imponującemu wideo poniżej możemy wiedzieć, jak daleko HTML5 został posunięty:
Tak, to Quake II w przeglądarce internetowej, więc teraz jest bardzo jasne, że z HTML5 narodzi się więcej przełomowych aplikacji internetowych, które będą służyć miliardom użytkowników Internetu. Jest szybki, ewoluuje i zmienia światową sieć. Pytanie brzmi, jak wykorzystałbyś ten zmieniający grę HTML5?
Chcemy usłyszeć twój pomysł!
.