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

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

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

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

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

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

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

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

Μπιλιάρδο

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

blob σαλάτα

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

Μπομόμο

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

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

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

Bubbles

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Υπνωτίζων

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

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

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

Parallax

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

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

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

Διάδοση

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

Starfield

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

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

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

Waveform

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

Εφέ 3D

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

Canvas3D και Flickr

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

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

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

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

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

κουτί δώρου google

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

J.S. Touch

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

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

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

Γνούπλοτ

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

RGraph

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

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

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

Χρώμα καμβά

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

CanvasMol

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

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

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

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

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

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

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

Φυσικό Σκίτσο

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

Sketchpad

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

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

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

Παιχνίδι

3 Βαριέται

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

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

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

Καμβάς

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

Πιάστο

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

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

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

κύβος

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

echaΦυσική

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

Παζλ

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

slide Puzzle

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

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

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

Tetris

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

Βάση στήλης

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