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


Treść artykułu jest zgodna z naszymi zasadami etyka redakcyjna. Aby zgłosić błąd, kliknij tutaj.

7 komentarzy, zostaw swoje

Zostaw swój komentarz

Twój adres e-mail nie zostanie opublikowany.

*

*

  1. Odpowiedzialny za dane: Miguel Ángel Gatón
  2. Cel danych: kontrola spamu, zarządzanie komentarzami.
  3. Legitymacja: Twoja zgoda
  4. Przekazywanie danych: Dane nie będą przekazywane stronom trzecim, z wyjątkiem obowiązku prawnego.
  5. Przechowywanie danych: baza danych hostowana przez Occentus Networks (UE)
  6. Prawa: w dowolnym momencie możesz ograniczyć, odzyskać i usunąć swoje dane.

  1.   Czupatina powiedział

    TETRIS NIE CHODZI, WKŁADAM DWIE KAWAŁKI I STOISKA, ALE Reszta to BARDZO CHŁODNE POSIADANIE

  2.   Elisa powiedział

    Uwielbiam tę stronę ... poza pierwszą grą. Kocham cię Fran =)
    Żegnajcie też buziaka dla świata

  3.   Helsic powiedział

    Niesamowite, spektakularne. Nie mogę uwierzyć, jak daleko zaszedł rozwój sieci!

  4.   Joe vega powiedział

    Nie wiem, dlaczego te zasoby są przypisane do HTML5, to jest czysty Javascript, przed pojawieniem się Flasha, z Javascriptem wszystko to można było zrobić, było badanie w Barcelonie, które sprawiło, że niektóre witryny w tym czasie rozwaliły mi głowę, wszystko w javascript tak bardzo, że nauczyłem się od nich i zaprojektowałem parę z odbijającymi się piłkami i tak dalej, kompletnie je zgubiłem i nadal tego żałuję. Nie pamiętam nazwy studia. Było to coś w stylu ty2 lub 2you2, które było w 98 roku.

  5.   ASDF powiedział

    Joe Vega …… to pokazuje, że nie masz pieprzonego pojęcia o HTML5… .lol

  6.   Joe vega powiedział

    Może nie masz cholernego pomysłu na HTML5, to prawda, ale mylicie koguta z kurnikiem i nie odróżniacie języka od środowiska. Wzywam was do zrobienia przykładu takiego jak te tutaj bez użycia Javascript, tylko z html5, a zrozumiecie, o co mi chodzi w poście, który usunąłem. Co więcej, patrzyłem na kod źródłowy przykładów i jest kilka, które można łatwo zrobić bez konieczności montowania go w html5.
    To prawda, że ​​HTML5 wprowadza wiele ulepszeń i rzeczy, które wiele ułatwiają, ale laury fantastycznej rzeczy pokazanej na tej stronie to Javascript.

  7.   Santiago Barchetta powiedział

    Jestem zainteresowany tworzeniem tego typu prezentacji ... czy masz tutorial lub stronę z zasobami ??? Dziękuję Ci!!!