48 brutais demostracións de HTML5 / CSS3

animación de debuxos animados en lona Escaparate HTML5: 48 demostracións potenciais de Flash Killing

Aproveito este post para responder a unha pregunta que fixeches recentemente nos comentarios dun artigo:

Cando é un bo momento para comezar a deseñar completamente con HTML5?

Ben, sinceramente, depende do obxectivo ao que te dirixas. Se non planeas que os teus visitantes utilicen Internet Explorer (por exemplo: páxina de software Mac), empeza de inmediato con HTML5, pero se precisas xente con IE para ver o teu sitio web, é mellor que agardes ...

Na entrada, ben despois do salto, 48 demostracións de HTML5 que son incribles e merecen ser vistas. Grande é pouco.

Fonte | HongKiat

aAnimación de udioburst

Unha animación cómoda e fantástica creada co lenzo e a etiqueta de audio de HTML5.

animación de audioburst Showcase HTML5: 48 demostracións potenciais de Flash Killing

Piscina de balón

Presentado no último evento de E / S de Google, esta demostración móstrache o dinámico que pode ser HTML5.

piscina de bolas Escaparate HTML5: 48 demostracións potenciais de Flash Killing

Blob Salad

Unha criatura xerada por HTML5 que che gustaría.

blob sallad HTML5 Showcase: 48 demostracións potenciais de Flash Killing

bomomo

Con Bomomo, podes observar diferentes movementos atómicos simulados con HTML5.

bomomo HTML5 Showcase: 48 demostracións potenciais de Flash Killing

Navegador Ball

Sorpréndete con esta bola HTML5 de "navegador cruzado".

bola do navegador Vitrina HTML5: 48 demostracións potenciais de Flash Killing

Bubbles

Divírtete creando infinitas burbullas flotantes de distinta cor.

escaparates de HTML5: 48 demostracións potenciais de Flash Killing

Animación de debuxos animados de lona

Un debuxo animado HTML5 sinxelo e divertido que che axuda a comprender o que pode facer o elemento lenzo de HTML5.

animación de debuxos animados en lona Escaparate HTML5: 48 demostracións potenciais de Flash Killing

reloxo fresco

Un reloxo analóxico agradable e personalizable construído por HTML5 e JavaScript.

coolclock HTML5 Showcase: 48 demostracións potenciais de Flash Killing

Presentación de Flickr PS3

Vexa as fotos de Flickr coa presentación de diapositivas ao estilo PS3 no navegador web.

presentación de diapositivas de flickr ps3 Exposición HTML5: 48 demostracións potenciais de Flash Killing

Polaroid interactivo

Unha demostración interactiva que funciona bastante semellante á interface multi táctil.

escaparate interactivo polaroid HTML5: 48 demostracións potenciais de Flash Killing

JS Fireworks

Goza do momento dos fogos artificiais coa túa gravidade e velocidade preferidas, impulsado por HTML5 e Javascript.

js Fireworks HTML5 Showcase: 48 Demos potenciais de Flash Killing

Caleidoscopio

Un caleidoscopio HTML5 moi fermoso e futurista.

caleidoscopio Vitrina HTML5: 48 demostracións potenciais de Flash Killing

Partículas líquidas

Animación de partículas sensibles que reacciona en función do movemento do rato.

partículas líquidas Vitrina HTML5: 48 demostracións potenciais de Flash Killing

Hipnotizador

Outra demostración HTML5 sensible e destacada que mostra como reaccionan os elementos próximos co movemento do rato.

fascinante escaparate HTML5: 48 demostracións potenciais de Flash Killing

Nube de nebulosas

Pérdete con esta marabillosa nebulosa HTML5.

Nube de nebulosas Vitrina HTML5: 48 demostracións potenciais de Flash Killing

Paralaxe

Ver todas as formas 2D en perspectiva paralela.

Paralaxe HTML5 Showcase: 48 demostracións potenciais de Flash Killing

Animación de partículas

Unha elegante animación de partículas HTML5 que se pode formar na túa mensaxe preferida.

animación de partículas Vitrina HTML5: 48 demostracións potenciais de Flash Killing

Estender

Pérdete con esta interminable animación de difusión.

escaparate HTML5: 48 demostracións potenciais de Flash Killing

Starfield

Unha animación de campo estelar HTML5 moi chula que cambiaría de dirección e velocidade en función do movemento do rato.

vitrina HTML5 de starfield: 48 demostracións potenciais de Flash Killing

Video Destrución

Un clic para facer estoupar un vídeo en reprodución.

destrución de vídeo Vitrina HTML5: 48 demostracións potenciais de Flash Killing

Forma de onda

Teña en conta como se move a onda do lenzo de HTML5 alterando a súa amplitude, lonxitude de onda, ancho, etc.

escaparate en forma de onda HTML5: 48 demostracións potenciais de Flash Killing

Efecto 3D

Impresionado pola animación do lenzo? É máis o que pode facer o elemento canvas de HTML5 e chámase efecto 3D. O desenvolvedor pode confiar en elementos de lona, ​​DOM e JavaScript para crear efectos 3D, que posteriormente se poden converter en animación ou xogo 3D.

Canvas3D e Flickr

Ten unha experiencia 3D completamente nova co fluxo fotográfico de Flickr.

canvas3d e flickr HTML5 Showcase: 48 demostracións potenciais de Flash Killing

Simulación de pano

Unha simulación realista baseada en HTML5.

simulación de tecido Vitrina HTML5: 48 demostracións potenciais de Flash Killing

Monstro en evolución

Observe un monstro que se converte nunha criatura complicada, un dos seus creadores é HTML5.

monstro en evolución Vitrina HTML5: 48 demostracións potenciais de Flash Killing

Caixa de agasallos de Google

O motor de busca xigante Google preséntase en 3D e reprodúcese.

google giftbox Vitrina HTML5: 48 demostracións potenciais de Flash Killing

JS Touch

Un escaparate "3D en lona 2D" de alta calidade e realista.

js touch HTML5 Showcase: 48 demostracións potenciais de Flash Killing

Presentación de datos

Aínda que o elemento de lona de HTML5 pode usarse para crear animación e efectos 3D, tamén se pode implementar para presentar datos matemáticos.

gnuplot

Gnuplot, unha aplicación de trazado de datos en versión HTML5.

gnuplot HTML5 Showcase: 48 demostracións potenciais de Flash Killing

R Gráfico

RGraph ofrece unha ampla gama de presentación de datos como gráfico de barras, barra de progreso e gráfico de radar tradicional.

rgraph HTML5 Showcase: 48 demostracións potenciais de Flash Killing

Aplicación Web

En definitiva, usando todas as posibilidades combinadas por HTML5 e outros idiomas, pódese crear unha aplicación interactiva ou un xogo próximo á aplicación Flash.

CanvasPaint

Testemuña que o irmán de Microsoft Paint entra no teu navegador web e o seu pai é HTML5.

canvaspaint Vitrina HTML5: 48 demostracións potenciais de Flash Killing

CanvasMol

Unha aplicación científica construída para axudarche a comprender a estrutura de certos elementos terrestres.

escaparate HTML5 de canvasmol: 48 demostracións potenciais de Flash Killing

Creador de debuxos animados

Debuxe unha interesante imaxe de debuxos animados con este constructor de debuxos animados mínimo e interactivo.

creador de debuxos animados Escaparate HTML5: 48 demostracións potenciais de Flash Killing

Arrastra calquera cousa aquí

Arrastra todo o que poida arrastrar na demostración para amosar detalles.

arrastra calquera cousa aquí Escaparate HTML5: 48 demostracións potenciais de Flash Killing

Boceto gártico

Unha aplicación HTML5 orixinal que che permite facer algúns debuxos básicos que se poden gardar en diferentes formatos de imaxe como jpeg ou png.

sketch gartic Vitrina HTML5: 48 demostracións potenciais de Flash Killing

Esbozo físico

Debuxa o que queiras e vexa como reaccionan coa gravidade simulada.

physicsketch Vitrina HTML5: 48 demostracións potenciais de Flash Killing

Bloc de debuxos

Unha potente aplicación de debuxo HTML5 que che permite debuxar e editar a túa imaxe do xeito preciso.

sketchpad Vitrina HTML5: 48 demostracións potenciais de Flash Killing

Pequena conversa

Unha aplicación web que confirma a posición xeográfica da mensaxe relacionada co tempo adquirida de Twitter, formándoas nun mapa de "tempo social" baseado en lenzo, bastante trivial (como afirmou o autor) pero interesante.

Showcase HTML5 de smalltalk: 48 demostracións potenciais de Flash Killing

Xogo

3 Aburrido

Nunca te aburrirías se podes seguir evitando centos de balas HTML5 no próximo segundo.

Vitrina HTML3 con 5 portos: 48 demostracións potenciais de Flash Killing

Breakout

Rebota a pelota para romper todos os ladrillos.

Escaparate HTML5: 48 demostracións potenciais de Flash Killing

Canvascape

Non é un xogo, pero demostra como se pode usar HTML5 para desenvolver un xogo de navegación en primeira persoa.

vitrina HTML5 de canvascape: 48 demostracións potenciais de Flash Killing

Agarralo

Cantas bólas podes esquivar para conseguir o teu cadrado HTML5 gañador?

captárao Escaparate HTML5: 48 demostracións potenciais de Flash Killing

Reacción en cadea

Encadea a explosión para acadar o obxectivo, non te adictas.

reacción en cadea Vitrina HTML5: 48 demostracións potenciais de Flash Killing

cubeout

Xoga ao Tetris en 3D, vista de arriba abaixo.

escaparate HTML5: 48 demostracións potenciais de Flash Killing

etchaFísica

Debuxa elemento para mover o balón á estrela, non te esquezas da gravidade.

etchaphysics Vitrina HTML5: 48 demostracións potenciais de Flash Killing

Crebacabezas

Fai clic, xira e solta pezas do puzzle para resolver este crebacabezas baseado en HTML5.

puzzle Showcase HTML5: 48 demostracións potenciais de Flash Killing

Puzle de diapositivas

Desliza cara á vitoria, outro xogo HTML5 construído para espremer o zume da túa mente.

Slide Puzzle HTML5 Showcase: 48 Demos potenciais Flash Killing

O mesmo xogo

Elimina un determinado grupo para obter outro grupo da mesma cor e ao final recibirías unha vitoria.

mesmo xogo Escaparate HTML5: 48 demostracións potenciais de Flash Killing

Tetris

Un dos xogos máis clásicos devolto á vida por HTML5.

Vitrina HTML5 de tetris: 48 demostracións potenciais de Flash Killing

Torus

Outro xogo de Tetris en versión pseudo-3D.

torus HTML5 Showcase: 48 demostracións potenciais de Flash Killing


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

7 comentarios, deixa os teus

Deixa o teu comentario

Enderezo de correo electrónico non será publicado.

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.

  1.   piruleta dixo

    O TETRIS NON VAI, POÑO DÚAS PEZAS E ESTÁ PERO O RESTO É CHAVALES MOI CHULAS

  2.   Elisa dixo

    Encántame esta páxina ... agás o primeiro xogo. Quérote Fran =)
    Bye un bico ao mundo taménooooooooo

  3.   Helsic dixo

    Incrible, espectacular. Non podo crer ata onde chegou o desenvolvemento web.

  4.   Joe vega dixo

    Non sei por que estes recursos se atribúen a HTML5, isto é Javascript puro, antes do xurdimento de Flash, con Javascript podíanse facer todas estas cousas, houbo un estudo en Barcelona que fixo que algúns sitios que no seu momento me botasen a cabeza, todo en javascript tanto que aprendín deles e deseñei unha parella con pelotas que saltaban e todo, perdín completamente e aínda me arrepinto. Non recordo o nome do estudo, era algo así como you2 ou 2you2 que había no 98 máis ou menos.

  5.   ASDF dixo

    Joe Vega …… demostra que non tes unha puta idea de HTML5… .mola

  6.   Joe vega dixo

    É posible que non teñades ningunha idea sanguínea de HTML5, pero vostedes confunden o galo co galiñeiro e non diferencian un idioma dun ambiente. Desafíoche a facer un exemplo como os de aquí sen usar Javascript, só con html5, e entenderás o que quería dicir na publicación que borrei. Ademais, estiven mirando o código fonte dos exemplos e hai varios que se poden facer facilmente sen ter que montalo en html5.
    Que html5 trae moitas melloras e cousas que facilitan moito é certo, pero o lóxico do fantástico que se mostra nesta páxina é Javascript.

  7.   Santiago Barchetta dixo

    Interésame facer presentacións deste tipo ... tes algún tutorial ou páxina con recursos ??? Grazas!!!

bool (verdadeiro)