48 brutalnych demonstracji HTML5 / CSS3

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.

Basen z piłeczkami

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

SAŁATKA BLOB

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

bummo

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

Piłka przeglądarki

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

Bubbles

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

Animacja na płótnie

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

Zegar chłodzący

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

Pokaz slajdów Flickr PS3

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

Interaktywny polaroid

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

JS Fajerwerki

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

Kalejdoskop

Bardzo piękny i futurystyczny kalejdoskop HTML5.

Płynne cząsteczki

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

Hipnotyzujący

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

Chmura mgławicy

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

Paralaksa

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

Animacja cząstek

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

Rozpiętość

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

Starfield

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

Zniszczenie wideo

Jedno kliknięcie, aby odtworzyć wideo.

Waveform

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

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.

Symulacja tkaniny

Realistyczna symulacja tkaniny oparta na HTML5.

Ewoluujący potwór

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

Pudełko na prezenty Google

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

JS Dotyk

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

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.

GRRAPH

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

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.

PłótnoMol

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

Konstruktor kreskówek

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

Przeciągnij wszystko tutaj

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

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.

Szkic fizyczny

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

Sketchpad

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

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ą.

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.

Breakout

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

Płótno

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

Złap to

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

Reakcja łańcuchowa

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

sześcian

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

etchaFizyka

Narysuj przedmiot, 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ę.

slide Puzzle

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

Ta sama gra

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

Tetris

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

Torus

Kolejna gra Tetris w wersji pseudo-3D.