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.
TETRIS NIE CHODZI, WKŁADAM DWIE KAWAŁKI I STOISKA, ALE Reszta to BARDZO CHŁODNE POSIADANIE
Uwielbiam tę stronę ... poza pierwszą grą. Kocham cię Fran =)
Żegnajcie też buziaka dla świata
Niesamowite, spektakularne. Nie mogę uwierzyć, jak daleko zaszedł rozwój sieci!
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.
Joe Vega …… to pokazuje, że nie masz pieprzonego pojęcia o HTML5… .lol
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.
Jestem zainteresowany tworzeniem tego typu prezentacji ... czy masz tutorial lub stronę z zasobami ??? Dziękuję Ci!!!