HTML5 Website Showcase: 48 Potential Flash-Killing Demos

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ł!

.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.