48 demos de HTML5/CSS3 brutales

canvas cartoon animation HTML5 Showcase: 48 Potential Flash Killing Demos

Aprovecho este post para resolver una duda que preguntasteis hace poco en los comentarios de un artículo:

¿Cuándo es un buen momento para empezar a diseñar completamente con HTML5?

Pues sinceramente, depende del target al que te dirijas. Si no tienes pensado que tus visitantes usen Internet Explorer (ej: página de software Mac) pues empieza ya mismo con HTML5, pero si necesitas que la gente con IE vea tu web será mejor que esperes…

Sobre la entrada, pues tras el salto 48 demos de HTML5 que son una pasada y que merecen ser vistas. Geniales es poco.

Fuente | HongKiat

audioburst Animation

A comfortable and fantastic animation created with HTML5’s canvas and audio tag.

audioburst animation HTML5 Showcase: 48 Potential Flash Killing Demos

Ball Pool

Being showcased in the last Google I/O event, this demo shows you how dynamic can HTML5 be.

ball pool HTML5 Showcase: 48 Potential Flash Killing Demos

Blob Sallad

A HTML5-spawned creature that would please you.

blob sallad HTML5 Showcase: 48 Potential Flash Killing Demos

Bomomo

With Bomomo, you can observe different atomic movement simulated with HTML5.

bomomo HTML5 Showcase: 48 Potential Flash Killing Demos

Browser Ball

Get amazed with this ‘cross-browser’ HTML5 ball.

browser ball HTML5 Showcase: 48 Potential Flash Killing Demos

Bubbles

Have fun by create endless floating bubbles with different color.

bubbles HTML5 Showcase: 48 Potential Flash Killing Demos

Canvas Cartoon Animation

A simple and funny HTML5 cartoon that helps you to understand what HTML5’s canvas element can do.

canvas cartoon animation HTML5 Showcase: 48 Potential Flash Killing Demos

Coolclock

A nice, customizable analog clock built by HTML5 and JavaScript.

coolclock HTML5 Showcase: 48 Potential Flash Killing Demos

Flickr PS3 Slideshow

View your Flickr’s photos with PS3 style slideshow in the web browser.

flickr ps3 slideshow HTML5 Showcase: 48 Potential Flash Killing Demos

Interactive Polaroid

An interactive demo that works pretty similar to multi touch interface.

interactive polaroid HTML5 Showcase: 48 Potential Flash Killing Demos

JS Fireworks

Enjoy the fireworks moment with your preferred gravity and speed, powered by HTML5 and Javascript.

js fireworks HTML5 Showcase: 48 Potential Flash Killing Demos

Kaleidoscope

A very beatiful and futuristic HTML5 kaleidoscope.

kaleidoscope HTML5 Showcase: 48 Potential Flash Killing Demos

Liquid Particles

Sensitive particle animation that reacts based upon your mouse movement.

liquid particles HTML5 Showcase: 48 Potential Flash Killing Demos

Mesmerizer

Another sensitive and outstanding HTML5 demo that shows how nearby elements react with you mouse movement.

mesmerizer HTML5 Showcase: 48 Potential Flash Killing Demos

Nebula Cloud

Get lost with this wondrous HTML5 nebula.

nebula cloud HTML5 Showcase: 48 Potential Flash Killing Demos

Parallax

View all 2D shapes in parallel perspective.

parallax HTML5 Showcase: 48 Potential Flash Killing Demos

Particle Animation

An elegant HTML5 particle animation that can form into your preferred message.

particle animation HTML5 Showcase: 48 Potential Flash Killing Demos

Spread

Get lost with this endless spread animation.

spread HTML5 Showcase: 48 Potential Flash Killing Demos

Starfield

A very cool HTML5 starfield animation that would change direction and speed based on your mouse movement.

starfield HTML5 Showcase: 48 Potential Flash Killing Demos

Video Destruction

One click to boom a playing video.

video destruction HTML5 Showcase: 48 Potential Flash Killing Demos

Waveform

Observe how HTML5’s canvas wave moves by altering its amplitude, wavelength, width, etc.

waveform HTML5 Showcase: 48 Potential Flash Killing Demos

3D Effect

Impressed by canvas animation? That’s more HTML5’s canvas element can do, and it’s called 3D effect. Developer can rely on canvas element, DOM and JavaScript to create 3D effect, which can later be developed into 3D animation or game.

Canvas3D and Flickr

Have a whole new 3D experience with Flickr’s photostream.

canvas3d and flickr HTML5 Showcase: 48 Potential Flash Killing Demos

Cloth Simulation

A realistic, HTML5-based cloth simulation.

cloth simulation HTML5 Showcase: 48 Potential Flash Killing Demos

Evolving Monster

Observe a monster evolving into a complicated creature, one of its creator is HTML5.

evolving monster HTML5 Showcase: 48 Potential Flash Killing Demos

Google Giftbox

Giant search engine Google is presented in 3D, playable view.

google giftbox HTML5 Showcase: 48 Potential Flash Killing Demos

JS Touch

A high quality and realistic ‘3D on 2D Canvas’ showcase.

js touch HTML5 Showcase: 48 Potential Flash Killing Demos

Data Presentation

While HTML5’s canvas element can be used to create animation and 3D effect, it can also be implemented to present mathematical data.

Gnuplot

Gnuplot, a data plotting application in HTML5 version.

gnuplot HTML5 Showcase: 48 Potential Flash Killing Demos

RGraph

RGraph provides a wide range of data presentation like bar chart, progress bar and traditional radar chart.

rgraph HTML5 Showcase: 48 Potential Flash Killing Demos

Web Application

Ultimately, using all possibilities combined by HTML5 and other langauge, one can create interactive application or game that’s close to Flash application.

CanvasPaint

Witness the brother of Microsoft Paint comes into your web browser, and his father is HTML5.

canvaspaint HTML5 Showcase: 48 Potential Flash Killing Demos

CanvasMol

A scientific application which is built to help you to understand certain earth element’s structure.

canvasmol HTML5 Showcase: 48 Potential Flash Killing Demos

Cartoon Builder

Draw interesting cartoon image with this minimal and interactive cartoon builder.

cartoon builder HTML5 Showcase: 48 Potential Flash Killing Demos

Drag Anything Here

Drag anything you can drag in the demo to show details.

drag anything here HTML5 Showcase: 48 Potential Flash Killing Demos

Gartic Sketch

An original HTML5 application that allows you to make some basic drawings that can be saved into different image format like jpeg or png.

gartic sketch HTML5 Showcase: 48 Potential Flash Killing Demos

PhysicSketch

Draw whatever you like and see how they react with simulated gravity.

physicsketch HTML5 Showcase: 48 Potential Flash Killing Demos

Sketchpad

A powerful HTML5 drawing application that enables you to draw and edit your image in the precise manner.

sketchpad HTML5 Showcase: 48 Potential Flash Killing Demos

Smalltalk

A web application that confirms geographical position of weather-related message acquired from Twitter, thus forming them into a canvas-based ’social weather’ map, quite trivial (as stated by author) but interesting.

smalltalk HTML5 Showcase: 48 Potential Flash Killing Demos

Game

3Bored

You would never get bored if you can keep evading hundreds of HTML5 bullets in next second.

3bored HTML5 Showcase: 48 Potential Flash Killing Demos

Breakout

Rebound the ball to break all bricks.

breakout HTML5 Showcase: 48 Potential Flash Killing Demos

Canvascape

Not quite a game, but it demonstrates how HTML5 can be used to develop First Person Shooting browser game.

canvascape HTML5 Showcase: 48 Potential Flash Killing Demos

Catch It

How many balls can you dodge to get your winning HTML5 square?

catch it HTML5 Showcase: 48 Potential Flash Killing Demos

Chain Reaction

Chain the explosion to achieve the goal, don’t get addicted.

chain reaction HTML5 Showcase: 48 Potential Flash Killing Demos

Cubeout

Play Tetris in 3D, top-down view.

cubeout HTML5 Showcase: 48 Potential Flash Killing Demos

etchaPhysics

Draw item to move the ball to the star, don’t forget about the gravity.

etchaphysics HTML5 Showcase: 48 Potential Flash Killing Demos

Jigsaw Puzzle

Click, rotate and drop puzzle pieces to solve this HTML5-based jigsaw puzzle.

jigsaw puzzle HTML5 Showcase: 48 Potential Flash Killing Demos

Slide Puzzle

Slide to the victory, another HTML5 game that’s built to squeeze your mind juice.

slide puzzle HTML5 Showcase: 48 Potential Flash Killing Demos

Same Game

Remove certain group to get another group paired in same color and you would eventually be awarded a victory.

same game HTML5 Showcase: 48 Potential Flash Killing Demos

Tetris

One of the most classic game brought back to life by HTML5.

tetris HTML5 Showcase: 48 Potential Flash Killing Demos

Torus

Yet another Tetris game in pseudo-3D version.

torus HTML5 Showcase: 48 Potential Flash Killing Demos


7 comentarios, deja el tuyo

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

  1.   Chupatina dijo

    EL TETRIS NO VA YO PONGO DOS PIEZAS Y SE QUEDA PARADO PERO EL RESTO ES MUY CHULO CHAVALES

  2.   Elisa dijo

    A mi me encanta esta pagina…menos el primer juego. Te QuIeRo Fran =)
    Chao un kiss a toooodooooooo el mundo

  3.   Helsic dijo

    Increible, espectacular. No puedo creer lo mucho q ha avanzado el desarrollo para web!

  4.   Joe Vega dijo

    No se porque le atribuyen estos recursos a HTML5, esto es puro Javascript, antes del auge de Flash, con el Javascript se podian hacer todas estas cosas, habia un estudio de Barcelona que hacia unos sitios que en la epoca me volaron la cabeza, todos en javascript, tanto que aprendi de ellos y diseñe un par con bolas que rebotaban y todo, los perdi por completo y aun lo lamento. No recuerdo el nombre del estudio era algo como you2 o 2you2 eso fue en el 98 mas o menos.

  5.   ASDF dijo

    Joe Vega……se nota que no tienes ni puñetera idea de HTML5….lol

  6.   Joe Vega dijo

    Es posible que no tenga ninguna puñetera idea de html5, es cierto, pero ustedes confunden el gallo con el gallinero y no diferencian un lenguaje de un entorno. Los desafío a que realicen algún ejemplo como los que están aquí sin usar Javascript, solo con html5, y entenderán lo que quise decir en el post que me borraron. Es mas, estuve viendo el código fuente de los ejemplos y hay varios que tranquilamente se pueden hacer sin necesidad de montarlo sobre html5.
    Que html5 trae muchisimas mejoras y cosas que facilitan mucho es cierto, pero los laureles de lo fantastico que se muestra en esta pagina es Javascript.

  7.   Santiago Barchetta dijo

    Me interesa realizar presentaciones de este tipo…tenes algun tutorial o página con recursos??? gracias!!!