Logo animation σε HTML5

[sukalas]

Καλησπέρα ,

 

Θέλω να φτιάξω ένα animation logo που να είναι ελαφρύ, συμβατό με όλους τους browsers και interactive.

 

Πιο συγκεκριμένα θέλω να φτιάξω μία αλληλουχία frames που να δείχνουν μία φλόγα να κυματίζει σε λούπα και σε mouse over να μπαίνει το  δεύτερο animation το οποίο θα είναι ένας πυροσβεστήρας που θα σβήνει τη φλόγα. Με το που τελειώσει το δεύτερο animation θα επανεμφανίζεται η φλόγα.

 

Τα frames θα γίνουν export σε svg ή png.Το πρώτο είναι πιο ελαφρύ λογικά αλλά δε ξέρω για συμβατότητα.

 

Αν θεωρήσουμε δεδομένο ότι έχω τα frames ποιος είναι ο καλύτερος τρόπος να γίνουν αυτά που λέω πιο πάνω?

 

gif & flash θα ήθελα να αποφύγω γιατί δεν είναι εντελώς συμβατά ή ελαφριά.

 

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

[lion2486]

Θα μπορούσες να το κάνει όλο σε script. Για παράδειγμα τη φλόγα σε κάτι τέτοιο.. http://www.computableminds.com/jquery-plugin-fire-animation-texture-generator.html

[cyclo]

Συμβατό με όλους τους browsers και html5 αδύνατο.

[slevinkelevra]

Με canvas εχω ασχοληθει πολυ επιδερμικα (δυστυχως). 

Με fallbacking μπορεις να υποστηριξεις html5 canvas σε παλιοτερους browser, εχω δουλεψει με το  Site: Webshim

 

Το καλο ειναι οτι μπορεις να το διαχειριστεις με πατροπαραδοτη javascript ή jquery. 

 

Ενα καλο βιβλιο που ειχα ξεκινησει να διαβαζω Rob Hawkes, Foundation HTML5 Canvas , 2011,  Friends Of ED

 

Σορρυ που δε μπορω να βοηθησω παραπανω

[te0ne]

εχει βγαλει η google ενα πολυ ΔΥΝΑΤΟ προγραμμα για html5 animations https://www.google.com/webdesigner/η μετα μπορεις να πας σε adobe edge animate το οποιο ειναι πολυ καλο αλλα πρεπει να το "Αγορασεις"

[XPHSTOS_]

Γίνεται καθαρά με CSS.

Δες ένα πρόχειρο παράδειγμα Site: εδώ.

[slevinkelevra]

Γίνεται καθαρά με CSS.

 

Δες ένα πρόχειρο παράδειγμα Site: εδώ.

Καλη φαση, δεν ηξερα οτι μπορει να κανει τετοιες μαγκιες το CSS3. Μονο που ειναι CSS3 και αρα παλι δεν υποστηριζεται απο παλιοτερους browsers =[ . Θα πρεπει παλι να βρει fallback.

[XPHSTOS_]

Μπορεί να βάλει ένα gif για fallback για να τελειώνει...
Τα gif είναι απόλυτα συμβατά με τους παλαιότερους browsers εκτός αν θέλει να το τρέχουν και σε text browsers :P

Αλλιώς να κοιτάξει προς javascript πλευρά... ή ακόμη να καλύτερα αν υπάρχει κάποιο js τύπου modernizer που να παρέχει fallback για παλαιότερους browser.
(Νομίζω πως το modernizer δεν παρέχει υποστήριξη για css animations... νομίζω,,,)

[slevinkelevra]

Παρεχει για τα βασικα, τα επιλεγεις ολα ή οποια θες.  Site: Τσεκαρε

 

Ο τυπακος αναφερει οτι 

 

 

gif & flash θα ήθελα να αποφύγω γιατί δεν είναι εντελώς συμβατά ή ελαφριά.

αλλα θα συμφωνησω μαζι σου οτι ενα gif θα τον εσωζε. Πολυ λιγοτερος κωδικας και ποσο βαρυ να ναι πια ενα gif?

[XPHSTOS_]

Ο τυπακος αναφερει οτι 

αλλα θα συμφωνησω μαζι σου οτι ενα gif θα τον εσωζε. Πολυ λιγοτερος κωδικας και ποσο βαρυ να ναι πια ενα gif?

Από την στιγμή που θα είναι λογότυπο, δηλαδή όχι φωτογραφία (μπορεί να μην περιέχει καν gradients) και δεν θα είναι full screen (άντε να είναι 400px Χ 400px) ένα gif 8bit θα είναι πιο ελαφρύ και από φτερό στον άνεμο... και χωρίς καμία αισθητική απώλεια. 

Αν παρόλα αυτά θέλουμε να μείνουμε σε JS λύση...

Μπορείς να δεις και αυτά που βρήκα: 

Site: GSAP (Πολύ καλό μου φαίνεται αυτό... και ελαφρύ!) 

Site: VELOCITY