Περιεχόμενο
- Ξεκινώντας
- Δημιουργία της βάσης του πικάπ
- Δημιουργία των ποδιών
- Το χέρι και το κεφάλι
- Χρώματα και υφές
- Απόδοση και εξαγωγή
- Τελειώνοντας το λογότυπο
- Ζώστε το λογότυπο
Υπάρχουν διάφοροι τρόποι δημιουργίας τρισδιάστατων κινούμενων σχεδίων στον ιστό, οι περισσότεροι από τους οποίους απαιτούν καλή γνώση του JavaScript και του WebGL ή τη χρήση ενός πρόσθετου όπως το Flash. Χάρη στους μετασχηματισμούς 3D CSS, είναι δυνατή η δημιουργία 3D χρησιμοποιώντας μόνο HTML και CSS, αλλά δεν είναι εύκολο να το κάνετε. Το Tridiv, η δωρεάν διαδικτυακή μου εφαρμογή, απλοποιεί τη διαδικασία, προσφέροντας μια απλή και διαισθητική διεπαφή WYSIWYG που επιτρέπει στους χρήστες να δημιουργούν τρισδιάστατα αντικείμενα χωρίς να γράφουν ούτε μία γραμμή κώδικα.
Σε αυτό το σεμινάριο, θα δημιουργήσουμε και θα δημιουργήσουμε ένα λογότυπο για το «Tridiv Records», μια φανταστική δισκογραφική εταιρεία, χρησιμοποιώντας μόνο HTML και CSS. Το κύριο οπτικό για το λογότυπο πρόκειται να δημιουργηθεί σε 3D χρησιμοποιώντας το Tridiv. Στη συνέχεια, θα προσθέσουμε τα τυπογραφικά στοιχεία χρησιμοποιώντας κανονικά HTML και CSS.
Μπορείτε να δείτε το τελικό κινούμενο σχέδιο και τον κωδικό που το δημιουργεί εδώ.
Ξεκινώντας
Θα ξεκινήσουμε δημιουργώντας το πικάπ σε 3D χρησιμοποιώντας το Tridiv. Μεταβείτε στο tridiv.com και ξεκινήστε την εφαρμογή. Θα πρέπει να χρησιμοποιείτε Chrome, Safari ή Opera 15 (ή μεταγενέστερη έκδοση).
Πριν ξεκινήσετε, είναι σημαντικό να κατανοήσετε τη διεπαφή Tridiv. Η κύρια ενότητα του προγράμματος επεξεργασίας αποτελείται από τέσσερις προβολές: πάνω αριστερά είναι η τρισδιάστατη προβολή, παρέχοντας μια πλήρη προβολή της σκηνής. Οι άλλες τρεις προβολές το δείχνουν από πάνω, πλάι και μπροστά. Χρησιμοποιώντας αυτές τις τρεις προβολές, μπορείτε να δημιουργήσετε, να επεξεργαστείτε και να μετακινήσετε τρισδιάστατα σχήματα.
Η οριζόντια γραμμή εργαλείων χωρίζεται σε δύο μέρη: το αριστερό μέρος εμφανίζει πληροφορίες σχετικά με το έγγραφό σας. το δεξί μέρος περιέχει εργαλεία για τη δημιουργία και την επεξεργασία σχημάτων. ο Κίνηση επιλογή και Επεξεργασία τα κουμπιά επιλογής εναλλάσσονται μεταξύ των διαφορετικών τρόπων επεξεργασίας.
Το παράθυρο ιδιοτήτων (η πλαϊνή γραμμή) εμφανίζει ρυθμίσεις εγγράφων, όπως ζουμ και snap to grid, και τις ιδιότητες του επιλεγμένου σχήματος (μέγεθος, θέση, περιστροφή, χρώμα και ούτω καθεξής). Η μονάδα που χρησιμοποιείται για διαστάσεις και θέση είναι ems. οι γωνίες περιστροφής είναι σε μοίρες.
Για να αποφευχθεί οποιαδήποτε σύγχυση αργότερα στο σεμινάριο, θα χρησιμοποιήσουμε το ακόλουθο στενό:
w = πλάτος h = ύψος d = βάθος διαμέτρου = διάμετρος x deg = περιστροφή στον άξονα x y deg = περιστροφή στον άξονα y z deg = περιστροφή στον άξονα z
Δημιουργία της βάσης του πικάπ
Ξεκινήστε ρυθμίζοντας την τιμή ζουμ σε 200. Για να σχεδιάσετε τα σχήματα, ενεργοποιήστε τη ρύθμιση snap to grid στο Ρυθμίσεις εγγράφου τμήμα της πλευρικής γραμμής. Ορίστε την τιμή θραύσης σε 0.125.
Η βάση του πικάπ αποτελείται από ένα απλό κυβοειδές, οπότε κάντε κλικ στο Προσθέστε κυβοειδή κουμπί στην επάνω γραμμή εργαλείων. Θα πρέπει να δείτε το cuboid να εμφανίζεται και στις τέσσερις προβολές στον επεξεργαστή.
Μετονομάστε το σχήμα σε βάση χρησιμοποιώντας το πεδίο ονόματος του παραθύρου ιδιοτήτων (κάτω Ιδιότητες σχήματος). Το όνομα του σχήματος πρέπει να είναι έγκυρο όνομα κλάσης CSS επειδή θα χρησιμοποιηθεί στον κώδικα που δημιουργείται από τον επεξεργαστή. Θα χρησιμοποιήσουμε αυτά τα ονόματα τάξεων αργότερα κατά την κίνηση του λογότυπου, οπότε βεβαιωθείτε ότι έχετε ορίσει κάθε νέο σχήμα που δημιουργείτε σωστά.
Μόλις ονομαστεί το κυβοειδές, βεβαιωθείτε ότι είναι επιλεγμένο στην κάτοψη (θα πρέπει να επισημαίνεται με μπλε χρώμα, με έναν κυκλικό δακτύλιο εργαλείων γύρω από αυτό) και, στη συνέχεια, κάντε κλικ στο Επεξεργασία κουμπί στο πάνω μέρος του δακτυλίου για να εμφανίσετε τις λαβές επεξεργασίας. Σύρετε τις λαβές ελέγχου στις πλευρές του κυβοειδούς, μέχρι να φτάσει το πλάτος και το βάθος w = 10 και δ = 8 στο Ιδιότητες σχήματος.
Κάντε κλικ στο σχήμα μέσα στην πλάγια όψη. Αυτό θα δείξει τις λαβές επεξεργασίας σε αυτήν την προβολή, επιτρέποντάς μας να αλλάξουμε το ύψος του. Ρυθμίστε το ύψος μέχρι να φτάσει h = 2. Μπορείτε επίσης να πληκτρολογήσετε τιμές απευθείας στο παράθυρο ιδιοτήτων. Για να ολοκληρώσετε τις γωνίες του κυβοειδούς, αλλάξτε τις τιμές γωνιών στο παράθυρο ιδιοτήτων σε 1.75και μετά πατήστε το [Εισαγω] κλειδί για την εφαρμογή των αλλαγών. Θα έχεις κάτι τέτοιο.
Δημιουργία των ποδιών
Για τα πόδια του πικάπ, πρόκειται να χρησιμοποιήσουμε κυλίνδρους. Προσθέστε έναν κύλινδρο και μετά αλλάξτε τη διάμετρο του σε διάμετρος = 1,75 και το ύψος του έως h = 0,5. Κάνε κλικ στο Κίνηση κουμπί επιλογής στην επάνω γραμμή εργαλείων για να εμφανιστεί η συρόμενη περιοχή στο σχήμα. Μετακινήστε τον κύλινδρο κάτω από τη βάση, τοποθετώντας τον σε μία από τις γωνίες. (Ίσως χρειαστεί να το μετακινήσετε στην επάνω, πλάγια και μπροστινή όψη.)
Αντιγράψτε τον κύλινδρο (πατήστε το Αντίγραφο κουμπί στον κυκλικό δακτύλιο εργαλείων ή πατήστε το ρε κλειδί) και για να μετακινήσετε τον νέο κύλινδρο σε άλλη γωνία της βάσης. Επαναλάβετε τη διαδικασία έως ότου τα τέσσερα πόδια τοποθετηθούν σωστά. Μην ξεχάσετε να ονομάσετε τους κυλίνδρους (για παράδειγμα, πόδια-αριστερά-πάνω, πόδια-δεξιά-πάνω, πόδια-αριστερά-κάτω, πόδια-αριστερά-πάνω). Όταν το κάνετε αυτό, το αποτέλεσμα θα μοιάζει με αυτό.
Θα εξετάσουμε τώρα τη δημιουργία της πιατέλας, του δίσκου, του άξονα βραχίονα και του κουμπιού. Η διαδικασία για τη δημιουργία των επόμενων σχημάτων είναι παρόμοια με αυτήν των ποδιών. Εδώ είναι οι διαστάσεις που χρησιμοποιούνται για τους διαφορετικούς κυλίνδρους:
πιατέλα: diam = 7; h = 0,5 δίσκος: διάμετρος = 6,75; h = 0,25 κουμπί: diam = 1,5; h = 0,25 βραχίονας-άξονας-βάση: διαμέτρου = 2,25; h = 0,25 άξονας βραχίονα: diam = 1,375; h = 1
Για να βελτιώσετε τις πλευρές των κυλίνδρων, μπορείτε να αυξήσετε τον αριθμό των όψεων σε κάθε μία, χρησιμοποιώντας το πεδίο πλευρών στο παράθυρο ιδιοτήτων. Μην προσθέτετε πάρα πολλές πλευρές, καθώς αυτό μπορεί να επηρεάσει αρνητικά την παγκόσμια απόδοση του προγράμματος επεξεργασίας και το τελικό κινούμενο σχέδιο. Σε αυτήν την περίπτωση, σας συμβουλεύω να μην χρησιμοποιείτε περισσότερες από 32 πλευρές για την πιατέλα και το δίσκο. Πρέπει να έχεις κάτι τέτοιο.
Το χέρι και το κεφάλι
Για το μπράτσο και το κεφάλι του πικάπ, θα χρησιμοποιούμε κυβοειδή. Για το βραχίονα, δημιουργήστε ένα κυβοειδές (β = 0,25; h = 0,25; d = 4και, στη συνέχεια, εφαρμόστε μια περιστροφή του -33° στο γ-άξονας. Για το κεφάλι, δημιουργήστε ένα κυβοειδές (β = 0,5; h = 0,5; d = 1και, στη συνέχεια, εφαρμόστε μια περιστροφή του -33° στο γ-άξονας. Ευθυγραμμίστε και τα δύο σχήματα με τον κύλινδρο άξονα βραχίονα. Το αποτέλεσμα θα πρέπει να μοιάζει με αυτό.
Χρώματα και υφές
Τελειώσαμε σχεδόν με το πικάπ. Το τελευταίο βήμα είναι να ορίσετε χρώματα και να εφαρμόσετε μια υφή στο βινύλιο (μια εικόνα που αντιπροσωπεύει την επιφάνεια της εγγραφής). Για να εκχωρήσετε χρώματα, επιλέξτε ένα σχήμα και κάντε κλικ στο χρωματιστά πεδίο στο παράθυρο ιδιοτήτων. Το Tridiv σάς επιτρέπει να καθορίζετε μεμονωμένα χρώματα για κάθε πρόσωπο ενός σχήματος, αλλά, σε αυτό το παράδειγμα, πρέπει να χρησιμοποιήσουμε όλο το πεδίο για να αλλάξουμε το χρώμα όλων των προσώπων. Για να το κάνετε αυτό, απλώς εισαγάγετε έναν εξαγωνικό κωδικό χρώματος στο πεδίο και μετά επιβεβαιώστε πατώντας Εισαγω.
Εδώ είναι τα χρώματα που χρησιμοποιούνται σε αυτό το παράδειγμα:
βάση: # 0099FF πόδια, κουμπί, άξονας, βραχίονας και κεφαλή: # δίσκος F2EEE5: # fa7f7a
Για την υφή του βινυλίου, η διαδικασία είναι παρόμοια με την εκχώρηση χρωμάτων. Επιλέξτε τον κύλινδρο δίσκου και, στη συνέχεια, κάντε κλικ στο εικόνες πεδίο στο παράθυρο ιδιοτήτων. Επικολλήστε τη διεύθυνση URL της εικόνας που θέλετε να εφαρμόσετε στο βινύλιο στο επάνω πεδίο και επιβεβαιώστε πατώντας Εισαγω. Μπορείτε να χρησιμοποιήσετε τη δική σας εικόνα ή να κατεβάσετε αυτήν που χρησιμοποιείται σε αυτό το παράδειγμα.
Θα πρέπει τώρα να έχετε κάτι που μοιάζει με αυτό.
Απόδοση και εξαγωγή
Τώρα που έχει γίνει το πικάπ, θα δουλέψουμε με τον τρόπο με τον οποίο αποδίδεται πριν από την εξαγωγή του. Κάντε κλικ στο Προεπισκόπηση κουμπί στο επάνω μέρος του παραθύρου ιδιοτήτων. Ορίστε την τιμή ζουμ σε 200 για να εμφανιστεί το πικάπ μεγαλύτερο. Για να αφαιρέσετε τα μαύρα περιγράμματα των σχημάτων, μεταβείτε στο Σύνορα ενότητα του παραθύρου και ορίστε την αδιαφάνεια σε 0. Το αποτέλεσμα πρέπει να μοιάζει κάπως έτσι.
Θέλουμε το πικάπ να ανάβει από την κορυφή. Για να το κάνετε αυτό, περιστρέψτε τη σκηνή με τέτοιο τρόπο ώστε η κορυφή του πικάπ να βλέπει προς εσάς. Η βάση πρέπει να φαίνεται τέλεια ορθογώνια. Η αλλαγή των φωτεινών και σκοτεινών τιμών στο τμήμα tridiv.com/d/4k6 του παραθύρου ιδιοτήτων θα αναδημιουργήσει τις σκιές στη σκηνή. Αλλάξτε την τιμή φωτός σε 0.
Το πικάπ είναι τώρα έτοιμο για εξαγωγή!
Τελειώνοντας το λογότυπο
Είμαστε έτοιμοι να προσθέσουμε το κείμενο στο λογότυπο και να δημιουργήσουμε το κινούμενο σχέδιο του λογότυπου. Κάντε κλικ στο Επεξεργασία στο κουμπί CodePen στο κάτω αριστερό μέρος του Προεπισκόπηση προβολή για εξαγωγή του κώδικα στο CodePen. Είναι σημαντικό να σημειωθεί ότι ο κώδικας CSS που δημιουργείται από την Tridiv δεν χρησιμοποιεί προθέματα προμηθευτών, επομένως θα χρειαστεί να χρησιμοποιήσετε εργαλεία όπως prefixr.com ή leaverou.github.io/prefixfree για να κάνετε τον κώδικα λειτουργικό σε κάθε πρόγραμμα περιήγησης. Ξεκινήστε κλείνοντας το παράθυρο JavaScript, καθώς δεν θα το χρησιμοποιήσουμε. Στο παράθυρο HTML, καταργήστε την ετικέτα στυλ που εφαρμόζεται στο .σκηνή div.
Αναπτύξτε το παράθυρο CSS και προσθέστε τον ακόλουθο κώδικα στο τέλος:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Εδώ, το translateY (-140 εικονοστοιχεία)) μετακινεί το πικάπ 140px προς τα πάνω, αφήνοντας χώρο για το κείμενο κάτω από αυτό. Μετά το rotateX (-55deg) ορίζει την κατακόρυφη κλίση του πικάπ.
Για να προσθέσετε το κείμενο, πρέπει να προσθέσετε ένα .τίτλος div αμέσως μετά το άνοιγμα # τριτ div στο παράθυρο HTML. Στο εσωτερικό, προσθέστε δύο εκτείνεται> (.main-title και .sub-title), διαχωρισμένο με ώρα />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Στη συνέχεια, πρέπει να εφαρμόσετε τις σωστές γραμματοσειρές και στυλ. Στο παράθυρο CSS, εισαγάγετε τη γραμματοσειρά Open Sans που χρησιμοποιείται στο λογότυπο και προσθέστε τα βασικά στυλ για τα στοιχεία κειμένου.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Κεντράρισμα μπλοκ κειμένου + βασικά στυλ γραμματοσειράς * / τίτλος {θέση: απόλυτη; κορυφή: 50%; αριστερά: 50%; περιθώριο: 0 0 0 -165 εικονοστοιχεία; πλάτος: 330 εικονοστοιχεία; ύψος: 5em; font-family: «Open Sans», sans-serif; βάρος γραμματοσειράς: 300; μέγεθος γραμματοσειράς: 24px; text-align: center; διαχωρισμός γραμμάτων: 1.5em; χρώμα: # 0099FF; } title hr {border: 1px solid # fa7f7a; περιθώριο: .75em 0; } εύρος τίτλου {display: block; }. κύριος τίτλος {font-size: 2.15em; } .sub-title {text-indent: .25em; }
Βόλα! Το λογότυπό σας είναι πλήρες. Θα πρέπει να μοιάζει με την παρακάτω εικόνα. Μόλις ολοκληρωθεί το τρισδιάστατο μοντέλο σας, μπορείτε να χρησιμοποιήσετε τη δύναμη του CSS για να το κάνετε ακόμα καλύτερο προσθέτοντας στυλ, κινούμενα σχέδια ή συμβάντα ποντικιού: απλώς μεταχειριστείτε το μοντέλο 3D όπως οποιοδήποτε άλλο στοιχείο HTML.
Ζώστε το λογότυπο
Δείτε ένα κινούμενο σχέδιο χρησιμοποιώντας το λογότυπο εδώ. Καθώς τα μέρη του πικάπ «πέφτουν», καθένα από αυτά μοιράζεται το ίδιο κινούμενο πλαίσιο με διαφορετικές καθυστερήσεις. Τα σχήματα έχουν το κορυφαίο χαρακτηριστικό 50%. Για να δημιουργήσουμε το εφέ πτώσης, κινούμαστε το κορυφαίο χαρακτηριστικό από -400 εικονοστοιχεία προς την 50%:
@keyframes πτώση {0% {top: -400px; } / * Ξεκινάμε την κινούμενη εικόνα τοποθετώντας το σχήμα σε ύψος 400px * / 100% {κορυφή: 50%; } / * και μετά το τελειώνουμε στην αρχική του θέση * /}
Μπορείτε να προσθέσετε αυτό το κινούμενο σχέδιο σε όλα τα σχήματα, ως εξής:
. σχήμα {κορυφή: -400 εικονοστοιχεία; animation: πτώση 1s ευκολία 0s προς τα εμπρός? }
Ορίστε το κορυφαίο χαρακτηριστικό σε -400 εικονοστοιχεία και προσθέστε μια καθυστέρηση:
.platter {animation-delay: 1.05s; } .disc {animation-delay: 1,35 δευτ. }. κουμπί {animation-delay: 1.5s; } ...
Δημιουργήστε το τελικό εφέ "αναπήδησης" χρησιμοποιώντας το περιστροφήΧ Χαρακτηριστικό:
90% {transform: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transform: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transform: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }
Έτσι δημιουργήσαμε αυτήν τη συγκεκριμένη έκδοση, αλλά θυμηθείτε: δεν υπάρχουν όρια!
Λόγια: Τζούλιαν Γκάρνιερ
Αυτό το άρθρο δημοσιεύτηκε αρχικά στο τεύχος 248 του περιοδικού net.
