Το Scalable Vector Graphics (SVG) είναι μια μορφή εικόνας γραμμένη σε XML. Με το SVG, μπορείτε να κωδικοποιήσετε ένα δισδιάστατο κλιμακωτό γραφικό. Στη συνέχεια, μπορείτε να τις εφαρμόσετε και να τις τροποποιήσετε σε CSS και JavaScript.
Το SVG επιτρέπει τρεις τύπους γραφικών: μορφές διανύσματος (ευθείες και καμπύλες γραμμές σε όλες τις κατευθύνσεις και σχήματα), εικόνες και κείμενο. Λόγω των διαφόρων δυνατοτήτων του, οι σχεδιαστές ιστοσελίδων μετατρέπονται σε SVG για να δημιουργήσουν σύνθετα κινούμενα σχέδια. Είναι εύκολο να εγκατασταθούν, να μην χάσουν την ποιότητα κατά την αλλαγή μεγέθους και δεν απαιτούν να λειτουργούν εφαρμογές τρίτων κατασκευαστών.
Δεδομένου ότι τα κινούμενα σχέδια εξακολουθούν να αυξάνονται στη δημοτικότητα, τα περισσότερα δεν είναι εξοικειωμένα με αυτά. Αυτό το άρθρο θα αναδείξει 20 φανταστικά animations SVG που δείχνουν τις δυνατότητες αυτής της μορφής.
1. Ιατρικά εικονίδια SVG από kittons
Γρήγοροι σύνδεσμοι
- 1. Ιατρικά εικονίδια SVG από kittons
- 2. Περάστε από το SeanMcCaffery
- 3. Τραβήξτε προς τα κάτω για ανανέωση (χαρτί) από τον Nikolay Talanov
- 4. Απλά συνεχίστε με το Diaco M. Lotfollahi
- 5. Φίλτρα SVG Προστέθηκαν στο βίντεο HTML5
- 6. Παζλ
- 7. Γραμμωτική κλίση από τον Patrick Young
- 8. Ας ταξιδέψουμε από το jjperezaguinaga
- 9. Ρολόι από τον Mohamad Mohebifar
- 10. Κινούμενα Εικόνα από τον Luigi De Rosa
- 11. Όλες οι συσκευές στο SVG από τον Chris Gannon
- 12. Καταρράκτης από τον Chris Gannon
- 13. Γεννήτρια εργοστασίων από τον Blake Bowen
- 14. Clickable Icon από τον Hamish Williams
- 15. Νέο κέικ από τον Marco Barría
- 16. Συρραπτικό χαρτιού από τον Chris Gannon
- 17. Χαμηλό Πολύλιο από το GRAYGHOST
- 18. Φορτωτής κλεψύδρας από τον Leela
- 19. Ανταποκριτική αγελάδα από τη Sarah Drasner
- 20. Φοιτητής της Domany
- Σειρά σου
Αυτή η ζεστή και ομαλή κινούμενη εικόνα είναι ιδανική για κάθε ιστοσελίδα που σχετίζεται με την υγεία. Ενώ κατατάσσετε τα διάφορα νήματα, οι εικόνες θα εμφανίζονται με λεπτότητα. Το αυτοκίνητο ασθενοφόρου ή το άτομο θα κατασκευάσει, το μάτι θα ανοίξει και ο γιατρός θα βγει έξω. Αυτή η κινούμενη εικόνα δείχνει όλη τη διασκέδαση και τη δυναμική του SVG.
Σύνδεσμος
2. Περάστε από το SeanMcCaffery
Universal animation που μπορείτε να βάλετε σε οποιαδήποτε διαδραστική ιστοσελίδα. Η λεπτή εμφάνιση των συνόρων κατά την περιστροφή σας αφήνει μια ικανοποιητική αίσθηση και σας προσκαλεί να κάνετε κλικ στον σύνδεσμο.
Σύνδεσμος
3. Τραβήξτε προς τα κάτω για ανανέωση (χαρτί) από τον Nikolay Talanov
Συνήθως, οι σελίδες θα ανανεώνονται όταν "τραβάτε" πάνω τους. Αυτή η κινούμενη εικόνα φέρνει αυτό σε ένα νέο επίπεδο. Όταν τραβήξετε προς τα κάτω για να το απελευθερώσετε, θα ξεκινήσετε ένα χαρτί αεροπλάνο στον ουρανό. Εάν θέλετε οι επισκέπτες σας να ανανεώνουν την εφαρμογή σας συχνά, θα πρέπει να εξετάσετε την προσθήκη μιας κινούμενης εικόνας όπως αυτή.
4. Απλά συνεχίστε με το Diaco M. Lotfollahi
Μια κινούμενη εικόνα SVG που δείχνει τις δυνατότητες του Vector Scaling. Η ομαλή και ακριβής κίνηση του ανθρώπινου σώματος είναι υπνωτιστική.
Σύνδεσμος
5. Φίλτρα SVG Προστέθηκαν στο βίντεο HTML5
Ο Paul Irish από την ομάδα του Google Chrome εξέτασε τον τρόπο με τον οποίο το SVG μπορεί να τροποποιήσει το περιεχόμενο εκτός διανυσματικών γραφικών. Συνδύασε το CSS και το SVG για να κάνει εκπληκτικά οπτικά φίλτρα για να δείξει ότι η κίνηση SVG μπορεί να είναι μια ωραία προσθήκη σε ένα έτοιμο βίντεο.
Σύνδεσμος
6. Παζλ
Μπορείτε να κάνετε εκπληκτικά διαδραστικά παζλ παιχνιδιού με animation SVG. Σε αυτό το παράδειγμα, μπορούμε να επιλέξουμε μία από τις πολλές εικόνες και να δούμε πώς αποικοδομείται σε πολλά κομμάτια του παζλ. Μπορείτε να την ανακατασκευάσετε επίσης!
Σύνδεσμος
7. Γραμμωτική κλίση από τον Patrick Young
Εάν βρίσκεστε σε φώτα νέον και ωραίες γραμματοσειρές, θα απολαύσετε αυτό το animation. Αυτή η εργασία δείχνει πώς δεν χρειάζεστε γραμμές κίνησης για λαμπρό κινούμενο σχέδιο, απλά μια μεγάλη γραμματοσειρά και σωστό κωδικό χρώματος με αποτέλεσμα κλίσης.
Σύνδεσμος
8. Ας ταξιδέψουμε από το jjperezaguinaga
Δύο αεροπλάνα και ένα μπαλόνι θερμού αέρα που περιστρέφονται γύρω από δημοφιλή ορόσημα του κόσμου. Αυτό το κινούμενο σχέδιο είναι πολύχρωμο, αισιόδοξο και πνευματικό. Δείχνει όλα όσα μπορείτε να κάνετε αν είστε επιδέξιος στο SVG.
Σύνδεσμος
9. Ρολόι από τον Mohamad Mohebifar
Μια απλή κίνηση SVG ενός ρολογιού που δείχνει την τρέχουσα ώρα. Η χαλαρωτική κίνηση των δεικτών και ο μινιμαλιστικός σχεδιασμός κάνουν θαύματα για αυτό το κινούμενο σχέδιο.
Σύνδεσμος
10. Κινούμενα Εικόνα από τον Luigi De Rosa
Εάν τοποθετήσετε το δείκτη του ποντικιού πάνω από αυτά τα εικονίδια, θα ενεργοποιήσετε τις κινούμενες εικόνες, οι οποίες είναι απλές αλλά αποτελεσματικές. Μπορείτε να δείτε ότι δεν χρειάζεται να κάνετε θαύματα για να κάνετε ένα εντυπωσιακό κινούμενο εικονίδιο.
11. Όλες οι συσκευές στο SVG από τον Chris Gannon
Μια κινούμενη εικόνα μιας λήψης που μεταφέρει όλες τις έξυπνες συσκευές που χρησιμοποιούμε με τον πιο δημιουργικό τρόπο. Η επιφάνεια εργασίας θα μετατραπεί σε φορητό υπολογιστή, φορητό υπολογιστή σε tablet, στη συνέχεια σε smartphone.
Σύνδεσμος
12. Καταρράκτης από τον Chris Gannon
Μια άλλη από τον Chris Gannon, αυτή είναι μια τακτοποιημένη επίδειξη ενός αφρού κατακόρυφου καταρράκτη. Η κίνηση του νερού είναι τακτοποιημένη και μπορείτε να δείτε μικρές σταγόνες του πιτσίλισμα νερού που αφήνουν τα σύνορα του κινούμενου ζωγράφου για να κάνουν τα πάντα να φαίνονται πιο ρεαλιστικά.
Σύνδεσμος
13. Γεννήτρια εργοστασίων από τον Blake Bowen
Τώρα αυτό είναι κάτι άλλο. Όταν κάνετε κλικ στο κουμπί "Δημιουργία", θα δείτε τα φυτά να αυξάνονται και να αυξάνονται. Αλλά κάθε φορά που κάνετε κλικ, θα σχηματιστούν διαφορετικά μοτίβα.
Σύνδεσμος
14. Clickable Icon από τον Hamish Williams
Ένα άλλο διαδραστικό SVG που ενεργοποιεί μια κινούμενη εικόνα αφού κάνετε κλικ σε αυτό. Αυτός θα ξεκινήσει την κινούμενη εικόνα "Αποστολή" μόλις το κάνετε κλικ.
Σύνδεσμος
15. Νέο κέικ από τον Marco Barría
Ενδιαφέρουσα κινούμενη εικόνα που δείχνει τη δημιουργία στρώματος κέικ από το στρώμα. Είναι ένα εντυπωσιακό animation SVG κατάλληλο για μια κάρτα γενεθλίων.
16. Συρραπτικό χαρτιού από τον Chris Gannon
Εάν σας αρέσει να βλέπετε το τεμαχισμό χαρτιού, θα απολαύσετε αυτήν την κινούμενη εικόνα που απεικονίζει ένα μηχάνημα τεμαχισμού χαρτιού με χαρτί απεριόριστες φορές σε μια απρόσκοπτη ακολουθία.
Σύνδεσμος
17. Χαμηλό Πολύλιο από το GRAYGHOST
Πρόκειται για μια εικονογραφημένη απεικόνιση και κίνηση που απεικονίζει το κεφάλι ενός λιονταριού που εμφανίζεται και εξαφανίζεται με τη μορφή κινούμενων πολυγώνων.
Σύνδεσμος
18. Φορτωτής κλεψύδρας από τον Leela
Μια άλλη αποτελεσματική κινούμενη εικόνα που χρησιμοποιεί μόνο SVG. Κάθε 5 δευτερόλεπτα, η κλεψύδρα θα γυρίσει ανάποδα και θα ξεκινήσει έναν νέο κύκλο.
Σύνδεσμος
19. Ανταποκριτική αγελάδα από τη Sarah Drasner
Πρόκειται για ένα αστείο διαδραστικό κινούμενο σχέδιο που σας επιτρέπει να κάνετε κλικ σε μια αγελάδα και να το σύρετε γύρω από το φεγγάρι, ενώ ένας αστροναύτης με αμηχανία το κοιτάζει.
20. Φοιτητής της Domany
Ένας ενθουσιώδης φοιτητής φαίνεται έτοιμος να μάθει! Είναι ένα υπέροχο κινούμενο σχέδιο όπου οι σελίδες του βιβλίου μετατρέπονται τακτοποιημένα. Δεν αναβοσβήνει από τον φοιτητή, αλλά αυτό εξακολουθεί να είναι μια τέλεια τακτοποιημένη κινούμενη εικόνα για να ολοκληρωθεί αυτή η λίστα.
Σύνδεσμος
Σειρά σου
Ποια είναι τα αγαπημένα σας animations SVG που δεν περιλαμβάνονται σε αυτήν τη λίστα; Μοιραστείτε τις επιλογές σας στα παρακάτω σχόλια!
