48 brutali demo HTML5 / CSS3

canvas cartoon animation Vetrina HTML5: 48 demo di potenziali uccisioni flash

Prendo questo post per risolvere una domanda che hai posto di recente nei commenti di un articolo:

Quando è un buon momento per iniziare a progettare completamente con HTML5?

Bene, onestamente, dipende dal target a cui ti rivolgi. Se non prevedi che i tuoi visitatori utilizzino Internet Explorer (es: pagina del software Mac), inizia subito con HTML5, ma se hai bisogno di persone con IE per vedere il tuo sito web, faresti meglio ad aspettare ...

All'ingresso, ben dopo il salto, 48 demo di HTML5 che sono sorprendenti e meritano di essere viste. Grande è piccolo.

Fonte | Hong Kiat

aAnimazione audioburst

Un'animazione comoda e fantastica creata con il canvas e il tag audio di HTML5.

animazione audioburst Vetrina HTML5: 48 demo potenziali di uccisione flash

Piscina di palline

Presentata nell'ultimo evento I / O di Google, questa demo mostra quanto può essere dinamico HTML5.

ball pool HTML5 Showcase: 48 Potential Flash Killing Demo

Blob Sallad

Una creatura generata da HTML5 che ti piacerebbe.

blob sallad Vetrina HTML5: 48 potenziali demo di uccisione flash

bomomo

Con Bomomo puoi osservare diversi movimenti atomici simulati con HTML5.

bomomo HTML5 Showcase: 48 Potential Flash Killing Demo

Sfera del browser

Lasciati stupire con questa sfera HTML5 "cross-browser".

browser ball HTML5 Showcase: 48 Potential Flash Killing Demo

Bubbles

Divertiti creando infinite bolle galleggianti con colori diversi.

Bollicine HTML5 Showcase: 48 Potential Flash Killing Demo

Animazione di cartoni animati su tela

Un fumetto HTML5 semplice e divertente che ti aiuta a capire cosa può fare l'elemento canvas di HTML5.

canvas cartoon animation Vetrina HTML5: 48 demo di potenziali uccisioni flash

coolclock

Un bell'orologio analogico personalizzabile costruito da HTML5 e JavaScript.

coolclock HTML5 Showcase: 48 Potential Flash Killing Demo

Presentazione di Flickr PS3

Visualizza le foto di Flickr con la presentazione in stile PS3 nel browser web.

flickr ps3 slideshow HTML5 Showcase: 48 Potential Flash Killing Demo

Polaroid interattiva

Una demo interattiva che funziona in modo abbastanza simile all'interfaccia multi touch.

Vetrina HTML5 polaroid interattiva: 48 demo potenziali di uccisione flash

Fuochi d'artificio JS

Goditi il ​​momento dei fuochi d'artificio con la gravità e la velocità che preferisci, grazie a HTML5 e Javascript.

js fireworks HTML5 Showcase: 48 Potential Flash Killing Demo

Kaleidoscope

Un caleidoscopio HTML5 molto bello e futuristico.

caleidoscopio HTML5 Showcase: 48 Potential Flash Killing Demo

Particelle liquide

Animazione di particelle sensibili che reagisce in base al movimento del mouse.

particelle liquide Vetrina HTML5: 48 demo di potenziali uccisioni flash

Ipnotizzatore

Un'altra demo HTML5 sensibile ed eccezionale che mostra come gli elementi vicini reagiscono al movimento del mouse.

mesmerizer Vetrina HTML5: 48 demo potenziali di uccisione flash

Nebulosa Cloud

Perditi con questa meravigliosa nebulosa HTML5.

nebula cloud Vetrina HTML5: 48 potenziali demo di uccisione flash

Parallasse

Visualizza tutte le forme 2D in prospettiva parallela.

parallasse HTML5 Showcase: 48 Potential Flash Killing Demo

Animazione delle particelle

Un'elegante animazione di particelle HTML5 che può formarsi nel tuo messaggio preferito.

animazione di particelle Vetrina HTML5: 48 demo potenziali di uccisione flash

Diffondere

Perditi con questa animazione a diffusione infinita.

diffusione HTML5 Showcase: 48 Potential Flash Killing Demo

starfield

Un'animazione starfield HTML5 molto interessante che cambierebbe direzione e velocità in base al movimento del mouse.

starfield HTML5 Showcase: 48 Potential Flash Killing Demo

Distruzione video

Un clic per eseguire il boom di un video in riproduzione.

distruzione video Vetrina HTML5: 48 demo potenziali di uccisione flash

Waveform

Nota come l'onda della tela di HTML5 si sposta alterando la sua ampiezza, lunghezza d'onda, larghezza, ecc.

waveform HTML5 Showcase: 48 Potential Flash Killing Demo

3D Effetto

Impressionato dall'animazione su tela? Questo è molto di più che l'elemento canvas di HTML5 può fare e si chiama effetto 3D. Lo sviluppatore può fare affidamento su elementi canvas, DOM e JavaScript per creare effetti 3D, che possono essere successivamente sviluppati in animazioni 3D o giochi.

Canvas3D e Flickr

Vivi un'esperienza 3D completamente nuova con il flusso di foto di Flickr.

canvas3d e flickr Vetrina HTML5: 48 demo potenziali di uccisione flash

Simulazione di stoffa

Una simulazione realistica del tessuto basata su HTML5.

simulazione di stoffa HTML5 Showcase: 48 Potential Flash Killing Demo

Mostro in evoluzione

Osserva un mostro che si evolve in una creatura complicata, uno dei suoi creatori è HTML5.

mostro in evoluzione Vetrina HTML5: 48 potenziali demo di uccisioni flash

Giftbox di Google

Il gigantesco motore di ricerca Google è presentato in 3D, vista riproducibile.

Google giftbox Vetrina HTML5: 48 potenziali dimostrazioni di uccisione flash

JS Touch

Una vetrina realistica e di alta qualità "3D su tela 2D".

js touch HTML5 Showcase: 48 Potential Flash Killing Demo

Presentazione dei dati

Sebbene l'elemento canvas di HTML5 possa essere utilizzato per creare animazioni ed effetti 3D, può anche essere implementato per presentare dati matematici.

gnuplot

Gnuplot, un'applicazione per il tracciamento dei dati nella versione HTML5.

gnuplot HTML5 Showcase: 48 Potential Flash Killing Demo

RGraph

RGraph fornisce un'ampia gamma di presentazioni di dati come grafico a barre, barra di avanzamento e grafico radar tradizionale.

rgraph HTML5 Showcase: 48 Potenziali dimostrazioni di uccisione flash

Applicazione web

Infine, utilizzando tutte le possibilità combinate da HTML5 e altri linguaggi, è possibile creare un'applicazione o un gioco interattivo vicino all'applicazione Flash.

TelaPaint

Guarda il fratello di Microsoft Paint che entra nel tuo browser web e suo padre è HTML5.

canvaspaint HTML5 Showcase: 48 potenziali demo di uccisione flash

TelaMol

Un'applicazione scientifica creata per aiutarti a comprendere la struttura di determinati elementi della terra.

canvasmol HTML5 Showcase: 48 potenziali demo di uccisione flash

Generatore di cartoni animati

Disegna un'immagine del fumetto interessante con questo generatore di cartoni animati minimale e interattivo.

cartoon builder Vetrina HTML5: 48 potenziali demo di uccisioni flash

Trascina qualsiasi cosa qui

Trascina tutto ciò che puoi trascinare nella demo per mostrare i dettagli.

trascina qualsiasi cosa qui Vetrina HTML5: 48 demo potenziali di uccisione flash

Schizzo di Gartic

Un'originale applicazione HTML5 che ti permette di realizzare alcuni disegni di base che possono essere salvati in diversi formati di immagine come jpeg o png.

gartic sketch HTML5 Showcase: 48 Potential Flash Killing Demo

FisicaSchizzo

Disegna quello che vuoi e guarda come reagiscono con la gravità simulata.

physicsketch Vetrina HTML5: 48 demo potenziali di uccisione flash

album per schizzi

Una potente applicazione di disegno HTML5 che ti consente di disegnare e modificare la tua immagine in modo preciso.

sketchpad HTML5 Showcase: 48 Potential Flash Killing Demo

Smalltalk

Un'applicazione web che conferma la posizione geografica dei messaggi meteorologici acquisiti da Twitter, formandoli così in una mappa 'meteo sociale' su tela, abbastanza banale (come affermato dall'autore) ma interessante.

Smalltalk HTML5 Showcase: 48 potenziali demo di uccisione flash

Gioco

3 Annoiato

Non ti annoierai mai se riesci a evitare centinaia di proiettili HTML5 nel secondo successivo.

3bored HTML5 Showcase: 48 Potential Flash Killing Demo

Scoppiare

Rimbalza la palla per rompere tutti i mattoni.

Showcase HTML5 di breakout: 48 demo potenziali di uccisione flash

Canvasscape

Non proprio un gioco, ma dimostra come HTML5 possa essere utilizzato per sviluppare il browser game di sparatorie in prima persona.

canvascape HTML5 Showcase: 48 Potential Flash Killing Demo

Prenderla

Quante palline riesci a schivare per ottenere il tuo quadrato HTML5 vincente?

prendilo Vetrina HTML5: 48 demo potenziali di uccisione flash

Reazione a catena

Concatena l'esplosione per raggiungere l'obiettivo, non diventare dipendente.

reazione a catena HTML5 Showcase: 48 Potential Flash Killing Demo

Cubo

Gioca a Tetris in 3D, vista dall'alto verso il basso.

cubeout HTML5 Showcase: 48 Potential Flash Killing Demo

etchFisica

Disegna l'oggetto per spostare la palla sulla stella, non dimenticare la gravità.

etchaphysics HTML5 Showcase: 48 Potential Flash Killing Demo

Gioco di pazienza

Fai clic, ruota e rilascia i pezzi del puzzle per risolvere questo puzzle basato su HTML5.

jigsaw puzzle HTML5 Showcase: 48 Potential Flash Killing Demo

slide Puzzle

Scivola verso la vittoria, un altro gioco HTML5 creato per spremere la tua mente.

Slide puzzle HTML5 Showcase: 48 Potenziali Demo Flash Killing

Stesso gioco

Rimuovi un determinato gruppo per abbinare un altro gruppo dello stesso colore e alla fine ti verrà assegnata una vittoria.

stesso gioco HTML5 Showcase: 48 Potential Flash Killing Demo

Tetris

Uno dei giochi più classici riportati in vita da HTML5.

tetris HTML5 Showcase: 48 Potential Flash Killing Demo

Torus

Ancora un altro gioco di Tetris in versione pseudo-3D.

torus HTML5 Showcase: 48 Potential Flash Killing Demo


Il contenuto dell'articolo aderisce ai nostri principi di etica editoriale. Per segnalare un errore fare clic su qui.

7 commenti, lascia il tuo

Lascia un tuo commento

L'indirizzo email non verrà pubblicato.

*

*

  1. Responsabile dei dati: Miguel Ángel Gatón
  2. Scopo dei dati: controllo SPAM, gestione commenti.
  3. Legittimazione: il tuo consenso
  4. Comunicazione dei dati: I dati non saranno oggetto di comunicazione a terzi se non per obbligo di legge.
  5. Archiviazione dati: database ospitato da Occentus Networks (UE)
  6. Diritti: in qualsiasi momento puoi limitare, recuperare ed eliminare le tue informazioni.

  1.   lecca-lecca suddetto

    IL TETRIS NON VA, METTO DUE PEZZI E STA IN PIEDI MA IL RESTO È MOLTO FREDDO CHAVALES

  2.   Elisa suddetto

    Amo questa pagina ... tranne il primo gioco. Ti amo Fran =)
    Ciao un bacio anche al mondo

  3.   Helsic suddetto

    Incredibile, spettacolare. Non riesco a credere a quanto sia arrivato lo sviluppo web!

  4.   Joe vega suddetto

    Non so perché queste risorse siano attribuite a HTML5, questo è puro Javascript, prima dell'avvento di Flash, con Javascript si potevano fare tutte queste cose, c'era uno studio a Barcellona che ha realizzato alcuni siti che all'epoca mi hanno fatto saltare la testa tutto in javascript così tanto che ho imparato da loro e ho progettato un paio con palle che rimbalzano e tutto il resto, le ho completamente perse e ancora me ne pento. Non ricordo il nome dello studio, era qualcosa come you2 o 2you2 che era nel 98 o giù di lì.

  5.   ASDF suddetto

    Joe Vega …… mostra che non hai idea di HTML5… .lol

  6.   Joe vega suddetto

    Potreste non avere una maledetta idea di HTML5, è vero, ma voi ragazzi scambiate il gallo per il pollaio e non differenziate una lingua da un ambiente. Ti sfido a fare un esempio come quelli qui senza usare Javascript, solo con html5, e capirai cosa intendevo nel post che ho cancellato. Inoltre, ho esaminato il codice sorgente degli esempi e ce ne sono diversi che possono essere facilmente eseguiti senza doverlo montare su html5.
    Che html5 apporti molti miglioramenti e cose che facilitano molto è vero, ma gli allori della cosa fantastica che viene mostrata in questa pagina è Javascript.

  7.   Santiago Barchetta suddetto

    Mi interessa fare presentazioni di questo tipo ... hai un tutorial o una pagina con le risorse ??? Grazie!!!