Πως ακριβώς γίνεται κάτι τέτοιο?

[L34x88iT]

Καλησπέρα. Έχω πάθει πλάκα με την ιδέα και την ομαλότητα που δημιουργείται το logo του Meta. Που "ρουφάει" όλα τα εικονίδια (Facebook, Instagram, Whatsapp κλπ) και δημιουργείται το logo του Meta. Αυτό εμφανίζεται εδώ, κάτω από το header μόλις κάνετε λίγο scroll.

Αυτό ξέρει κάποιος πως έχει φτιαχτεί? Δοκίμασα να το αποθηκεύσω με δεξί κλικ κατά την κίνηση και απλά κατέβασε ένα png στο συγκεκριμένο frame που το πάτησα. Θέλω να αναθέσω κάτι τέτοιο στο fiverr, αλλά δεν ξέρω τι είναι και πως να το αναζητήσω (βίντεο? gif animator? JS? κάτι άλλο?)

Βασικά θέλω να κάνω κάτι αντίστοιχο σαν εμφάνιση, αλλά με άλλο "trigger". Έχω το logo icon μου (Ένα σύμβολο). Θέλω όταν κάνει mouserover κάποιος, να ξετυλίγει ο τίτλος μου με κίνηση κάπως όπως του meta και όταν κάνει mouseout να ξαναδιπλώνεται σε εικονίδιο

[parsifal]

https://www.google.com/search?q=canvas+animation

[xrhstosiak]

που να δεις τι καμενιες εχουν φτιαξει μερικοι εδω μεσα

και πολλα ειναι μονο με css

https://www.youtube.com/kepowob/videos

[Predatorkill]

Μηπως ειναι lottie? 
 

πχ https://lottiefiles.com/83487-meta

Επεξ/σία 2 Μαρτίου 2022 από Predatorkill

[k33theod]

Στις 1/3/2022 στις 10:55 ΠΜ, L34x88iT είπε

Καλησπέρα. Έχω πάθει πλάκα με την ιδέα και την ομαλότητα που δημιουργείται το logo του Meta. Που "ρουφάει" όλα τα εικονίδια (Facebook, Instagram, Whatsapp κλπ) και δημιουργείται το logo του Meta. Αυτό εμφανίζεται εδώ, κάτω από το header μόλις κάνετε λίγο scroll.

Αυτό ξέρει κάποιος πως έχει φτιαχτεί? Δοκίμασα να το αποθηκεύσω με δεξί κλικ κατά την κίνηση και απλά κατέβασε ένα png στο συγκεκριμένο frame που το πάτησα. Θέλω να αναθέσω κάτι τέτοιο στο fiverr, αλλά δεν ξέρω τι είναι και πως να το αναζητήσω (βίντεο? gif animator? JS? κάτι άλλο?)

Βασικά θέλω να κάνω κάτι αντίστοιχο σαν εμφάνιση, αλλά με άλλο "trigger". Έχω το logo icon μου (Ένα σύμβολο). Θέλω όταν κάνει mouserover κάποιος, να ξετυλίγει ο τίτλος μου με κίνηση κάπως όπως του meta και όταν κάνει mouseout να ξαναδιπλώνεται σε εικονίδιο

Μάλλον όπως είπε και ο @parsifal είναι canvas αυτό σημαίνει ότι είναι js. Καλά τutorial κατά τη γνώμη μου έχει και ο mozilla https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial. Και το αντίστοιχο 3D https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API. To συγκεκριμένο πιθανώς ν χρησιμοποιεί και κάποια lib πανω στο API. Τέτοιες υπάρχουν άπειρες. Για όποιον ενδιαφέρεται πολύ καλή είναι three.js https://threejs.org/  που απλοποιεί αρκετά τα πράγματα