48 βάναυση επιδείξεις HTML5 / CSS3

Κινούμενα σχέδια καμβά κινουμένων σχεδίων HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

Παίρνω αυτήν την ανάρτηση για να απαντήσω σε μια ερώτηση που κάνατε πρόσφατα στα σχόλια ενός άρθρου:

Πότε είναι η κατάλληλη στιγμή για να ξεκινήσετε να σχεδιάζετε πλήρως με HTML5;

Ειλικρινά, εξαρτάται από τον στόχο που στοχεύετε. Εάν δεν σκοπεύετε να χρησιμοποιούν οι επισκέπτες σας τον Internet Explorer (π.χ. σελίδα λογισμικού Mac), ξεκινήστε αμέσως με HTML5, αλλά εάν χρειάζεστε άτομα με IE για να δουν τον ιστότοπό σας, καλύτερα να περιμένετε ...

Στην καταχώριση, πολύ μετά το άλμα 48 επιδείξεις HTML5 που είναι καταπληκτικά και αξίζει να τα δεις. Το υπέροχο είναι λίγο.

Πηγή | Χονγκ Κιάτ

aΚινούμενη εικόνα udioburst

Ένα άνετο και φανταστικό κινούμενο σχέδιο που δημιουργήθηκε με καμβά HTML5 και ετικέτα ήχου.

audioburst animation HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Μπιλιάρδο

Παρουσιάζεται στην τελευταία εκδήλωση Google I / O, αυτή η επίδειξη δείχνει πόσο δυναμική μπορεί να είναι η HTML5.

ball pool HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Blob Sallad

Ένα πλάσμα αναπαραγωγής HTML5 που θα σας ευχαριστούσε.

blob sallad HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Μπομόμο

Με το Bomomo, μπορείτε να παρατηρήσετε διαφορετικές ατομικές κινήσεις που προσομοιώνονται με HTML5.

bomomo HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Μπάλα προγράμματος περιήγησης

Εκπλαγείτε με αυτήν την μπάλα HTML5 «cross-browser».

μπάλα του προγράμματος περιήγησης HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Bubbles

Διασκεδάστε δημιουργώντας ατελείωτες πλωτές φυσαλίδες με διαφορετικό χρώμα.

bubble HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

Κινούμενα σχέδια κινουμένων σχεδίων καμβά

Ένα απλό και αστείο καρτούν HTML5 που σας βοηθά να κατανοήσετε τι μπορεί να κάνει το στοιχείο καμβά του HTML5.

Κινούμενα σχέδια καμβά κινουμένων σχεδίων HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

Δροσερό ρολόι

Ένα ωραίο, προσαρμόσιμο αναλογικό ρολόι που δημιουργήθηκε από HTML5 και JavaScript.

coolclock HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Παρουσίαση Flickr PS3

Προβάλετε τις φωτογραφίες του Flickr με παρουσίαση σε στυλ PS3 στο πρόγραμμα περιήγησης ιστού.

flickr ps3 slideshow HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

Διαδραστικό Polaroid

Μια διαδραστική επίδειξη που λειτουργεί αρκετά παρόμοια με τη διεπαφή πολλαπλών αφής.

διαδραστική έκθεση Polaroid HTML5: 48 Πιθανές επιδείξεις Killing Flash

JS Πυροτεχνήματα

Απολαύστε τη στιγμή των πυροτεχνημάτων με τη βαρύτητα και την ταχύτητα που προτιμάτε, με την υποστήριξη HTML5 και Javascript.

js fireworks HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Καλειδοσκόπιο

Ένα πολύ όμορφο και φουτουριστικό καλειδοσκόπιο HTML5.

kaleidoscope HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

Υγρά σωματίδια

Ευαίσθητη κίνηση σωματιδίων που αντιδρά με βάση την κίνηση του ποντικιού σας.

υγρά σωματίδια HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

Υπνωτίζων

Ένα άλλο ευαίσθητο και εξαιρετικό demo HTML5 που δείχνει πώς τα κοντινά στοιχεία αντιδρούν με την κίνηση του ποντικιού σας.

mesmerizer HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Νεφέλωμα Νεφέλου

Χαθείτε με αυτό το θαυμάσιο νεφέλωμα HTML5.

Έκθεση nebula cloud HTML5: 48 Πιθανές επιδείξεις φονιάς Flash

Παράλλαξη

Δείτε όλα τα σχήματα 2D σε παράλληλη προοπτική.

parallax HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Κίνηση σωματιδίων

Ένα κομψό κινούμενο σχέδιο σωματιδίων HTML5 που μπορεί να διαμορφωθεί στο μήνυμα που προτιμάτε.

particle animation HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Διάδοση

Χαθείτε με αυτό το ατελείωτο κινούμενο σχέδιο.

spread HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Starfield

Ένα πολύ ωραίο animation HTML5 starfield που θα άλλαζε κατεύθυνση και ταχύτητα με βάση την κίνηση του ποντικιού σας.

Starfield HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Καταστροφή βίντεο

Ένα κλικ για να κάνετε boom ένα βίντεο που παίζει.

καταστροφή βίντεο HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Waveform

Παρατηρήστε πώς κινείται το κύμα καμβά του HTML5 αλλάζοντας το πλάτος, το μήκος κύματος, το πλάτος κ.λπ.

waveform HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Εφέ 3D

Εντυπωσιάστηκε από την κίνηση του καμβά; Αυτό μπορεί να κάνει περισσότερο το στοιχείο καμβά του HTML5 και ονομάζεται 3D εφέ. Ο προγραμματιστής μπορεί να βασιστεί σε στοιχείο καμβά, DOM και JavaScript για να δημιουργήσει εφέ 3D, το οποίο αργότερα μπορεί να εξελιχθεί σε τρισδιάστατη κίνηση ή παιχνίδι.

Canvas3D και Flickr

Απολαύστε μια εντελώς νέα εμπειρία 3D με τη φωτογραφική ροή του Flickr.

canvas3d και flickr HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Προσομοίωση πανιών

Μια ρεαλιστική προσομοίωση υφασμάτων που βασίζεται σε HTML5.

ύφασμα προσομοίωσης HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις φονιάς Flash

Εξελικτικό τέρας

Παρατηρήστε ένα τέρας που εξελίσσεται σε ένα περίπλοκο πλάσμα, ένας από τους δημιουργούς του είναι HTML5.

Εξελιγμένη τέρατα Έκθεση HTML5: 48 Πιθανές επιδείξεις Killing Flash

Google Giftbox

Η γιγαντιαία μηχανή αναζήτησης Το Google παρουσιάζεται σε τρισδιάστατη προβολή.

google giftbox HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

JS Touch

Υψηλής ποιότητας και ρεαλιστική βιτρίνα «3D σε 2D Canvas».

js touch HTML5 Showcase: 48 Πιθανές επιδείξεις φονιάς Flash

Παρουσίαση δεδομένων

Ενώ το στοιχείο καμβά του HTML5 μπορεί να χρησιμοποιηθεί για τη δημιουργία εφέ κίνησης και 3D, μπορεί επίσης να εφαρμοστεί για την παρουσίαση μαθηματικών δεδομένων.

Γνούπλοτ

Gnuplot, μια εφαρμογή σχεδίασης δεδομένων σε έκδοση HTML5.

gnuplot HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

RGraph

Το RGraph παρέχει ένα ευρύ φάσμα παρουσίασης δεδομένων όπως γράφημα ράβδων, γραμμή προόδου και παραδοσιακό γράφημα ραντάρ.

rgraph HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

Εφαρμογή ιστού

Τελικά, χρησιμοποιώντας όλες τις δυνατότητες σε συνδυασμό με το HTML5 και άλλες γλώσσες, μπορεί κανείς να δημιουργήσει διαδραστική εφαρμογή ή παιχνίδι που βρίσκεται κοντά στην εφαρμογή Flash.

Χρώμα καμβά

Παρακολουθήστε ότι ο αδελφός της Microsoft Paint μπαίνει στο πρόγραμμα περιήγησής σας στο Web και ο πατέρας του είναι HTML5.

canvaspaint HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

CanvasMol

Μια επιστημονική εφαρμογή που έχει δημιουργηθεί για να σας βοηθήσει να κατανοήσετε τη δομή κάποιου γήινου στοιχείου.

canvasmol HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

Οικοδόμος κινουμένων σχεδίων

Σχεδιάστε ενδιαφέρουσα εικόνα κινουμένων σχεδίων με αυτό το ελάχιστο και διαδραστικό πρόγραμμα δημιουργίας κινούμενων σχεδίων.

cartoon builder HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Σύρετε οτιδήποτε εδώ

Σύρετε οτιδήποτε μπορείτε να σύρετε στο demo για να δείτε λεπτομέρειες.

σύρετε οτιδήποτε εδώ Έκθεση HTML5: 48 Πιθανές επιδείξεις Killing Flash

Γαρτικό σκίτσο

Μια πρωτότυπη εφαρμογή HTML5 που σας επιτρέπει να δημιουργήσετε μερικά βασικά σχέδια που μπορούν να αποθηκευτούν σε διαφορετική μορφή εικόνας όπως jpeg ή png.

gartic σκίτσο Έκθεση HTML5: 48 Πιθανές επιδείξεις Killing Flash

PhysicSketch

Σχεδιάστε ό, τι θέλετε και δείτε πώς αντιδρούν με προσομοιωμένη βαρύτητα.

physicsketch HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

Sketchpad

Μια ισχυρή εφαρμογή σχεδίασης HTML5 που σας επιτρέπει να σχεδιάσετε και να επεξεργαστείτε την εικόνα σας με τον ακριβή τρόπο.

Sketchpad HTML5 Showcase: 48 Πιθανές επιδείξεις φονιάς Flash

Ψιλοκουβέντα

Μια εφαρμογή ιστού που επιβεβαιώνει τη γεωγραφική θέση του μηνύματος που σχετίζεται με τον καιρό που αποκτήθηκε από το Twitter, σχηματίζοντας τους έτσι σε έναν χάρτη «κοινωνικού καιρού» που βασίζεται σε καμβά, αρκετά ασήμαντος (όπως δηλώνει ο συγγραφέας) αλλά ενδιαφέρων.

smalltalk HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Παιχνίδι

3 Βαριέται

Δεν θα βαρεθήκατε ποτέ εάν μπορείτε να αποφύγετε εκατοντάδες σφαίρες HTML5 στο επόμενο δευτερόλεπτο.

Βιτρίνα 3bored HTML5: 48 Πιθανές επιδείξεις Killing Flash

ξεμπλοκάρισμα

Αναπήδηση της μπάλας για να σπάσει όλα τα τούβλα.

breakout HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Καμβάς

Δεν είναι αρκετά παιχνίδι, αλλά δείχνει πώς μπορεί να χρησιμοποιηθεί το HTML5 για την ανάπτυξη παιχνιδιού προγράμματος περιήγησης First Person Shooting.

canvascape HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Πιάστο

Πόσες μπάλες μπορείτε να αποφύγετε για να κερδίσετε το τετράγωνο HTML5 που κερδίζετε;

πιάσε το HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις φονιάς Flash

Αλυσιδωτή αντίδραση

Αλυσίδα της έκρηξης για να πετύχετε το στόχο, μην εθιστείτε.

αλυσιδωτή αντίδραση HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

Cubeout

Παίξτε Tetris σε προβολή 3D, από πάνω προς τα κάτω.

cubeout HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

echaΦυσική

Σχεδιάστε το στοιχείο για να μετακινήσετε την μπάλα στο αστέρι, μην ξεχάσετε τη βαρύτητα.

etchaphysics HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Παζλ

Κάντε κλικ, περιστρέψτε και αποθέστε κομμάτια παζλ για να λύσετε αυτό το παζλ που βασίζεται σε HTML5.

jigsaw puzzle HTML5 Βιτρίνα: 48 Πιθανές επιδείξεις Killing Flash

slide Puzzle

Προχωρήστε στη νίκη, ένα άλλο παιχνίδι HTML5 που έχει δημιουργηθεί για να πιέσει το χυμό του μυαλού σας.

slide puzzle HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Ίδιο παιχνίδι

Αφαιρέστε συγκεκριμένη ομάδα για να δημιουργήσετε ένα άλλο γκρουπ στο ίδιο χρώμα και τελικά θα σας δοθεί μια νίκη.

ίδιο παιχνίδι HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Tetris

Ένα από τα πιο κλασικά παιχνίδια που ξαναζωντανεύει το HTML5.

tetris HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash

Βάση στήλης

Ένα ακόμη παιχνίδι Tetris σε ψευδο-3D έκδοση.

torus HTML5 Showcase: 48 Πιθανές επιδείξεις Killing Flash


Το περιεχόμενο του άρθρου συμμορφώνεται με τις αρχές μας συντακτική ηθική. Για να αναφέρετε ένα σφάλμα κάντε κλικ Aquí.

7 σχόλια, αφήστε τα δικά σας

Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.

  1.   Τσουπατίνα dijo

    Ο ΤΕΤΡΗΣ ΔΕΝ ΠΑΡΕΧΕΙ, ΒΑΘΩ ΔΥΟ ΠΙΝΑΚΕΣ ΚΑΙ ΠΑΙΔΙΑ

  2.   Elisa dijo

    Μου αρέσει αυτή η σελίδα ... εκτός από το πρώτο παιχνίδι. Σ 'αγαπώ Fran =)
    Αντίο φιλί στον κόσμο πάρα πολύ

  3.   Ελσικά dijo

    Απίστευτο, θεαματικό. Δεν μπορώ να πιστέψω πόσο έχει φτάσει η ανάπτυξη ιστού!

  4.   Τζο Βέγκα dijo

    Δεν ξέρω γιατί αυτοί οι πόροι αποδίδονται στο HTML5, αυτό είναι καθαρό Javascript, πριν από την άνοδο του Flash, με το Javascript όλα αυτά τα πράγματα θα μπορούσαν να γίνουν, υπήρχε μια μελέτη στη Βαρκελώνη που έκανε κάποιους ιστότοπους που εκείνη τη στιγμή έριχναν το κεφάλι μου, όλα σε javascript τόσο πολύ που έμαθα από αυτά και σχεδίασα ένα ζευγάρι με αναπηδώντας μπάλες και όλα, τα έχασα εντελώς και εξακολουθώ να το μετανιώνω. Δεν θυμάμαι το όνομα του στούντιο ήταν κάτι σαν εσένα 2 ή 2y2 που ήταν το '98 περίπου.

  5.   ASDF dijo

    Joe Vega …… δείχνει ότι δεν έχετε καμία ιδέα για το HTML5… .lol

  6.   Τζο Βέγκα dijo

    Μπορεί να μην έχετε καμία αιματηρή ιδέα html5, είναι αλήθεια, αλλά εσείς κάνετε λάθος τον κόκορα για το κοτέτσι και δεν διαχωρίζετε μια γλώσσα από ένα περιβάλλον. Σας προκαλώ να κάνετε ένα παράδειγμα όπως αυτό χωρίς να χρησιμοποιήσετε το Javascript, μόνο με το html5 και θα καταλάβετε τι εννοούσα στην ανάρτηση που διέγραψα. Επιπλέον, έχω κοιτάξει τον πηγαίο κώδικα των παραδειγμάτων και υπάρχουν πολλά που μπορούν εύκολα να γίνουν χωρίς να χρειάζεται να το τοποθετήσετε στο html5.
    Αυτό το html5 φέρνει πολλές βελτιώσεις και τα πράγματα που διευκολύνουν πολλά είναι αλήθεια, αλλά οι επιτυχίες του φανταστικού πράγμα που εμφανίζεται σε αυτήν τη σελίδα είναι Javascript.

  7.   Σαντιάγκο Μπαρχέττα dijo

    Ενδιαφέρομαι να κάνω παρουσιάσεις αυτού του τύπου ... έχετε κάποιο σεμινάριο ή σελίδα με πόρους ;;; Ευχαριστώ!!!