Niezwykłe możliwości HTML5 i JavaScript – przykłady

html5

Poziom średnio-zaawansowany

Pracując z JavaScript i HTML5 można napotkać na różne ciekawe rozwiązania, a jeszcze ciekawsze mogą być przykłady stworzone głównie w celu demonstracji możliwości tych technologii.

Niezwykłe możliwości HTML5 i JavaScript oraz CSS

W dzisiejszym artykule rzucimy okiem na niektóre z licznych przykładów tego typu. Czasami aż trudno uwierzyć że jest to możliwe w samych językach Web, bez użycia dodatków typu Flash.

Niektóre efekty są naprawdę imponujące.

HTML5 Chess Game Example

Gra w szachy w JavaScript i HTML5, nie tylko z widokiem 2D ale również 3D!

javascript-html5-chess

Przykład online:

http://htmlchess.sourceforge.net/demo/example.html

HTML5 i eksperymenty z teksturami

Ten przykład to szkielet gry 3D w HTML5 i JavaScript, z zaimplementowanym teksturowaniem.

html5-canvas-3d-game

Przykład online:

http://www.benjoffe.com/code/demos/canvascape/textures

CanvasMol

Zainteresowani chemią lub biologią? Bo mnie zawsze jakoś do tego ciągnęło, dlatego każdy software związany z tym tematem przykuwa moją uwagę.

Przykładem może być CanvasMol. To imponujące rozwiązanie umożliwia wizualizację cząsteczek czy też DNA. A wszystko z efektownymi animacjami.

canvasmol-html5-demo

Przykład online:

http://alteredqualia.com/canvasmol/

Tunneler

Przykład o mniejszej wartości edukacyjnej niż poprzedni, ale takie animacje z pewnością mogą cieszyć oko.

html5-js-canvas-demo

Przykład online:

http://ghost-hack.com/post/jsexperiments/tunneler/tunneler.html

Solar System – Układ Słoneczny w CSS3

Kolejny eksperyment, tym razem oparty o możliwości CSS3.

solar-system-demo-css3

Przykład online:

http://neography.com/experiment/circles/solarsystem/

Album w 3D

Czyli przegląd zdjęć w 3D z użyciem HTML5 Canvas.

html5-canvas-3d

Przykład online:

http://peterned.home.xs4all.nl/3d/

Renderowanie postaci 3D

W tym przypadku mamy do czynienia generowaniem realistycznie wyglądającej postaci. I to nie za pomocą DirectX, C++ i powiązanych narzędzi, ale za pomocą HTML5 i biblioteki three.js, a zatem także WebGL.

A to już naprawdę niezwykłe możliwości jak na JavaScript.

three-js-canvas-html5-3d-demo

Przykład online:

http://alteredqualia.com/three/examples/webgl_materials_skin.html

Strona ta zawiera znacznie więcej takich przykładów.

WebGL?

To bardzo obiecująca technologia, która już odnosi sukcesy.


Spójrzmy dla na demo możliwości jednej z bibliotek (GLGE będąca warstwą nieco upraszczającą programowanie z WebGL):

http://www.glge.org/category/demos/

na przykład:

http://glge.org/demos/shadows/

Niezwykłe możliwości HTML5 i JavaScript – podsumowanie

Przedstawiliśmy niektóre z licznych przykładów niezwykłych możliwości technologii WWW.

Z pewnością warto poszerzyć swoje horyzonty poprzez analizę kodów źródłowych takich przykładów (tam gdzie to możliwe).

Widzimy takie możliwości i wiemy, że mogą one także inspirować nas to własnych, innowacyjnych dzieł.

Pozdrawiam!

Web Developer ze sporym bagażem doświadczeń.
Języki: xhtml, html5, css3, js, php, python, java.
Hobby: programowanie gier (browser, mobile).

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+2Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.