48 brutale HTML5 / CSS3 demoer

lærred tegneserie animation HTML5 Showcase: 48 Potentielle Flash Killing Demos

Jeg tager dette indlæg for at besvare et spørgsmål, du for nylig stillede i kommentarerne til en artikel:

Hvornår er et godt tidspunkt at begynde at designe fuldt ud med HTML5?

Helt ærligt afhænger det af det mål, du målretter mod. Hvis du ikke planlægger, at dine besøgende skal bruge Internet Explorer (f.eks. Mac-softwareside), skal du straks starte med HTML5, men hvis du har brug for folk med IE for at se dit websted, må du hellere vente ...

Om indgangen godt efter springet 48 demoer af HTML5, der er fantastiske og fortjener at blive set. Fantastisk er lille.

Kilde | HongKiat

audioburst animation

En behagelig og fantastisk animation oprettet med HTML5's lærred og lydtag.

audioburst-animation HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Boldpool

At blive fremvist i den sidste Google I / O-begivenhed, viser denne demo dig, hvor dynamisk HTML5 kan være.

bold pool HTML5 Showcase: 48 Potentielle Flash Killing Demo

Klat Sallad

En HTML5-skabt væsen, der vil behage dig.

blob sallad HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

bomomo

Med Bomomo kan du observere forskellige atombevægelser simuleret med HTML5.

bomomo HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Browserbold

Bliv forbløffet med denne 'cross-browser' HTML5-kugle.

browser-kugle HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Bubbles

Hav det sjovt ved at skabe uendelige flydende bobler med forskellige farver.

bobler HTML5 fremvisning: 48 Potentielle Flash-dræbende demoer

Canvas tegneserie animation

En enkel og sjov HTML5-tegneserie, der hjælper dig med at forstå, hvad HTML5s lærredselement kan gøre.

lærred tegneserie animation HTML5 Showcase: 48 Potentielle Flash Killing Demos

coolclock

Et flot, tilpassbart analogt ur bygget af HTML5 og JavaScript.

coolclock HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Flickr PS3 diasshow

Se dine Flickrs fotos med PS3-stil diasshow i webbrowseren.

flickr ps3 slideshow HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Interaktiv Polaroid

En interaktiv demo, der fungerer stort set lig multi-interface.

interaktiv polaroid HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

JS Fyrværkeri

Nyd fyrværkeri øjeblikket med din foretrukne tyngdekraft og hastighed, drevet af HTML5 og Javascript.

js fyrværkeri HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Kaleidoscope

Et meget smukt og futuristisk HTML5 kalejdoskop.

kalejdoskop HTML5 Fremvisning: 48 Potentielle Flash-dræbende demoer

Flydende partikler

Følsom partikelanimation, der reagerer baseret på din musebevægelse.

flydende partikler HTML5 Showcase: 48 Potentielle flashdræbende demoer

hypnotiserende

En anden følsom og enestående HTML5-demo, der viser, hvordan nærliggende elementer reagerer med din musebevægelse.

mesmerizer HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Skytåge

Gå vild med denne vidunderlige HTML5-tåge.

nebula cloud HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Parallax

Se alle 2D-figurer parallelt.

parallax HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Partikelanimation

En elegant HTML5-partikelanimation, der kan danne din foretrukne besked.

partikelanimation HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Spred

Gå vild med denne endeløse spredte animation.

spred HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

starfield

En meget cool HTML5 starfield animation, der ville ændre retning og hastighed baseret på din musebevægelse.

starfield HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Videodestruktion

Et klik for at boom en afspilningsvideo.

videodestruktion HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Bølgeform

Læg mærke til, hvordan HTML5s lærredbølge bevæger sig ved at ændre dens amplitude, bølgelængde, bredde osv.

bølgeform HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

3D-effekt

Imponeret af lærred animation? Det er mere HTML5's lærredselement kan gøre, og det kaldes 3D-effekt. Udvikler kan stole på lærredselement, DOM og JavaScript for at skabe 3D-effekt, som senere kan udvikles til 3D-animation eller spil.

Canvas3D og Flickr

Få en helt ny 3D-oplevelse med Flickrs fotostream.

canvas3d og flickr HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Tøjsimulering

En realistisk HTML5-baseret kludsimulering.

kludsimulering HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Udviklende monster

Overhold et monster, der udvikler sig til en kompliceret væsen, en af ​​dens skabere er HTML5.

udviklende monster HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Google gaveæske

Kæmpe søgemaskine Google præsenteres i 3D, afspilelig visning.

google gaveæske HTML5 Fremvisning: 48 Potentielle Flash-dræbende demoer

J.S. Touch

En høj kvalitet og realistisk '3D on 2D Canvas' udstillingsvindue.

js touch HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Data Præsentation

Mens HTML5s lærredselement kan bruges til at skabe animation og 3D-effekt, kan det også implementeres for at præsentere matematiske data.

gnuplot

Gnuplot, en dataplotting-applikation i HTML5-version.

gnuplot HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

RGraph

RGraph giver en bred vifte af datapræsentationer som søjlediagram, statuslinje og traditionelt radardiagram.

rgraph HTML5 Fremvisning: 48 Potentielle Flash-dræbende demoer

Webapplikation

I sidste ende bruger man alle muligheder kombineret med HTML5 og andet sprog, man kan oprette interaktivt program eller spil, der er tæt på Flash-applikationen.

CanvasMaling

Vidne til broren til Microsoft Paint kommer ind i din webbrowser, og hans far er HTML5.

canvaspaint HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

CanvasMol

En videnskabelig applikation, der er bygget til at hjælpe dig med at forstå bestemte jordelements struktur.

canvasmol HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Tegneseriebygger

Tegn interessant tegneseriebillede med denne minimale og interaktive tegneseriebygger.

tegneseriebygger HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Træk noget herhen

Træk alt, hvad du kan trække i demoen for at vise detaljer.

træk noget her HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Gartisk skitse

Et originalt HTML5-program, der giver dig mulighed for at lave nogle grundlæggende tegninger, der kan gemmes i forskellige billedformater som jpeg eller png.

gartisk skitse HTML5 Showcase: 48 Potentielle Flash Killing Demos

Fysisk skitse

Tegn hvad du vil og se, hvordan de reagerer med simuleret tyngdekraft.

physicsketch HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Sketchpad

Et kraftfuldt HTML5-tegningsprogram, der giver dig mulighed for at tegne og redigere dit billede på den nøjagtige måde.

sketchpad HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Small talk

En webapplikation, der bekræfter geografisk placering af vejrrelateret besked erhvervet fra Twitter, og dermed danner dem til et lærredbaseret 'socialt vejr' kort, ganske trivielt (som angivet af forfatteren) men interessant.

smalltalk HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Vildt

3Kedelig

Du vil aldrig kede dig, hvis du kan fortsætte med at undgå hundreder af HTML5-kugler i næste sekund.

3-boret HTML5 Fremvisning: 48 Potentielle Flash-dræbende demoer

Udbrud

Sving bolden tilbage for at bryde alle mursten.

breakout HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

lærredslandskab

Ikke helt et spil, men det viser, hvordan HTML5 kan bruges til at udvikle First Person Shooting browserspil.

canvascape HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Fang det

Hvor mange bolde kan du undvige for at få din vindende HTML5-firkant?

fange det HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Chain Reaction

Kæd eksplosionen for at nå målet, bliv ikke afhængig.

kædereaktion HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

cubeout

Spil Tetris i 3D, set ovenfra og ned.

cubeout HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

etchaFysics

Tegn element for at flytte bolden til stjernen, glem ikke tyngdekraften.

etchaphysics HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Jigsaw Puzzle

Klik, roter og slip puslespil for at løse dette HTML5-baserede puslespil.

puslespil HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Slide Puzzle

Skub til sejr, et andet HTML5-spil, der er bygget til at presse din sindssaft.

glidepuslespil HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Samme spil

Fjern en bestemt gruppe for at få en anden gruppe parret i samme farve, og du vil til sidst blive tildelt en sejr.

samme spil HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Tetris

Et af de mest klassiske spil bragt tilbage til livet af HTML5.

tetris HTML5 Showcase: 48 Potentielle Flash-dræbende demoer

Torus

Endnu et Tetris-spil i pseudo-3D-version.

torus HTML5 Showcase: 48 Potentielle Flash-dræbende demoer


Efterlad din kommentar

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er markeret med *

*

*

  1. Ansvarlig for dataene: Miguel Ángel Gatón
  2. Formålet med dataene: Control SPAM, management af kommentarer.
  3. Legitimering: Dit samtykke
  4. Kommunikation af dataene: Dataene vil ikke blive kommunikeret til tredjemand, undtagen ved juridisk forpligtelse.
  5. Datalagring: Database hostet af Occentus Networks (EU)
  6. Rettigheder: Du kan til enhver tid begrænse, gendanne og slette dine oplysninger.

  1.   slikkepind sagde han

    TETRIS GÅR IKKE, JEG sætter to stykker på og bliver, men resten er meget kølige karavaler

  2.   Elisa sagde han

    Jeg elsker denne side ... undtagen det første spil. Jeg elsker dig Fran =)
    Farvel et kys til verden foroodooooooo

  3.   helsic sagde han

    Utrolig, spektakulær. Jeg kan ikke tro, hvor langt webudvikling er kommet!

  4.   Joe vega sagde han

    Jeg ved ikke, hvorfor disse ressourcer tilskrives HTML5, dette er rent Javascript, før Flash opstod, med Javascript kunne du gøre alle disse ting, der var en undersøgelse i Barcelona, ​​der lavede nogle steder, der på det tidspunkt sprang mig i tankerne, alt i javascript så meget, at jeg lærte af dem og designet et par med hoppende bolde og alt, jeg mistede dem fuldstændigt og fortryder det stadig. Jeg kan ikke huske navnet på studiet, det var noget som you2 eller 2you2, der var i 98 eller deromkring.

  5.   asdf sagde han

    Joe Vega ... det viser, at du ikke har nogen idé om HTML5 ... .lol

  6.   Joe vega sagde han

    Du har muligvis ikke nogen blodig html5-idé, det er sandt, men du forveksler hane med hønsegården og adskiller ikke et sprog fra et miljø. Jeg udfordrer dig til at lave et eksempel som dem her uden at bruge Javascript, kun med html5, og du vil forstå, hvad jeg mente i det indlæg, jeg slettede. Hvad mere er, jeg har kigget på kildekoden til eksemplerne, og der er flere, der let kan gøres uden at skulle montere den på html5.
    At html5 bringer mange forbedringer, og ting, der letter meget, er sandt, men laurbærene til den fantastiske ting, der vises på denne side, er Javascript.

  7.   santiago barcheta sagde han

    Jeg er interesseret i at holde præsentationer af denne type ... har du en tutorial eller side med ressourcer ?? tak!!!