Δημιουργία διαδραστικών επιπτώσεων 3D τυπογραφίας

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

Ρίξτε μια ματιά σε πολλούς από τους ιστότοπους που παρουσιάζονται ως βραβευμένοι ή λάβουν 'site των τίτλων ημέρας και σύντομα θα παρατηρήσετε ότι η χρήση της τυπογραφίας τους καθίσταται κεντρική στο σχεδιασμό, επιτρέποντάς τους να αυξηθούν πάνω από τον ανταγωνισμό τους. Αυτό μπορεί να κυμαίνεται από τα κινούμενα έντυπα επιστολών, την αντιδραστική κίνηση στις αλληλεπιδράσεις των χρηστών, στην τολμηρή χρήση μορφών τύπου που λαμβάνει κεντρικό στάδιο (κρατήστε τα αρχεία τυπογραφίας σας ασφαλή στο αποθήκευση σύννεφων ).

Εάν θέλετε να δημιουργήσετε μια τοποθεσία που αρπάζει την προσοχή με μηδενική αναστάτωση, δοκιμάστε ένα οικοδόμος ιστότοπου πολύ. Και βεβαιωθείτε ότι η απόδοση του ιστότοπού σας βελτιστοποιείται με την κορυφή web hosting .

• 3D γραμματοσειρές: 9 συμβουλές κορυφής τύπου

Σε αυτό το σεμινάριο, το εφέ τύπου θα χρησιμοποιήσει τα σχήματα των γραμμάτων ως μάσκα σε μερικά γρήγορα, ελεύθερα ρέοντα σωματίδια μονοπάτια που θα στροβιλίσουν δυναμικά και θα μετακινηθούν μέσω των γραμμάτων. Όχι μόνο θα υπάρξει αυτή η όμορφη κινούμενη εικόνα, αλλά καθώς αυτό θα γίνει επάνω στο Html5 καμβά Στοιχείο, αυτό θα μετασχηματιστεί σε 3D για να περιστρέφεται προς το ποντίκι καθώς κινείται γύρω από την οθόνη. Αυτό είναι ιδανικό για κεφαλίδες τοποθεσίας ή μόνο όταν πρέπει να αρπάξετε την προσοχή του χρήστη για μια κλήση σε δράση.

Κατεβάστε τα αρχεία φροντιστηρίων εδώ

01. Ξεκινήστε τη διαδικασία

Ανοίξτε το φάκελο "Έναρξη" από τα αρχεία του έργου στον κωδικό σας IDE. Το έργο πρόκειται να ξεκινήσει δημιουργώντας την κατηγορία αντικειμένων σωματιδίων. Αυτό θα χρησιμοποιηθεί για τη δημιουργία εικόνων που ρέουν στο πλαίσιο του σχεδίου. Ανοίξτε το αρχείο 'Sketch.js' και προσθέστε την ακόλουθη μεταβλητή για να αρχίσετε να δημιουργείτε το σωματίδιο βάσης.

 σωματίδιο λειτουργίας () {
  αυτό.Pos = Δημιουργός (τυχαία (πλάτος), τυχαία ((ύψος - 100))).
  this.vel = δημιουργία (0, 0);
  this.acc = δημιουργία (0, 0).
  αυτό το maxspeed = maxpeed?
  αυτό.Prevpos = αυτό.pos.copy (); 

02. Ενημερώστε το σωματίδιο

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

 αυτό.Update = λειτουργία () {
  this.vel.add (this.acc);
  this.vel.limit (αυτό το maxspeed)?
  αυτό.pos.add (this.vel);
  this.acc.mult (0).
  } 

03. Πηγαίνετε με τη ροή

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

 αυτό.Follow = λειτουργία (διανύσματα) {
  var x = πάτωμα (αυτό.pos.x / scl);
  var y = πάτωμα (αυτό.pos.y / scl);
  var index = x + y * cols;
  VAR δύναμη = διανύσματα [ευρετήριο];
  αυτό.Απλάδιο (δύναμη).
  } 

04. Ακολουθήστε αλλά όχι πολύ στενά

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

 αυτό.Scatter = λειτουργία (διανύσματα) {
  αυτό.pos.x + = τυχαίο (-0,9, 0,9).
  αυτό.Pos.y + = τυχαίο (-0,9, 0,9).
  }
  this.applyforce = λειτουργία (δύναμη) {
  this.acc.add (δύναμη);
  } 

05. Εμφανίστε το σωματίδιο

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

 αυτό.Show = λειτουργία () {
  εγκεφαλικό επεισόδιο (180).
  Strokeweight (1);
  γραμμή (αυτό.pos.x, αυτό.pos.y, αυτό.prevpos.x, αυτό.prevpos.y);
  αυτό.UpdatePrev ();
  }
  this.updateprev = λειτουργία () {
  αυτό.Prevpos.x = αυτό.pos.x;
  αυτό.prevpos.y = αυτό.pos.y;
  } 

06. Τυλίξτε γύρω

Η λειτουργία των άκρων λειτουργεί αν το σωματίδιο φτάσει στην άκρη της οθόνης και, αν ναι, περιτυλίξει γύρω για να έρθει στην αντίθετη πλευρά. Αυτή η ενότητα ασχολείται με τη θέση Χ έτσι ώστε να ανιχνεύει αν είναι μεγαλύτερο από το πλάτος της οθόνης και στη συνέχεια να την στέλνει στην αριστερή άκρη και αντίστροφα.

 Αυτή η λειτουργία = λειτουργία () {
  Αν (αυτό.pos.x & gt; πλάτος) {
  αυτό.pos.x = 0;
  αυτό.UpdatePrev ();
  }
  αν (αυτό.pos.x & lt; 0) {
  αυτό.pos.x = πλάτος;
  αυτό.UpdatePrev ();
  } 

07. Η απόλαυση του περιτύλιγματος

Αυτός ο κώδικας είναι το υπόλοιπο της ανίχνευσης ακμής και ανιχνεύει το σωματίδιο στον άξονα Υ για το επάνω και το κάτω μέρος της οθόνης. Οι βραχίονες εδώ περιτυλίγουν ολόκληρη την τάξη των σωματιδίων. Αυτό σημαίνει χρησιμοποιώντας αυτή την τάξη πολλά σωματίδια μπορούν να δημιουργηθούν.

 εάν (αυτό.pos.y & gt; Ύψος) {
  αυτό.pos.y = 0;
  αυτό.UpdatePrev ();
  }
  Εάν (αυτό.pos.y & lt; 0) {
  αυτό.Pos.y = Ύψος;
  αυτό.UpdatePrev ();
  }
  }
} 

08. Κάντε πολλά σωματίδια

Τώρα, καθώς το σωματίδιο δημιουργήθηκε ήρθε η ώρα να σκεφτούμε για πολλά σωματίδια. Για να το κάνετε αυτό το σύνολο του κώδικα μας μπορεί να πάει πάνω από την τάξη των σωματιδίων. Εδώ δηλώνεται μια σειρά παγκόσμιων μεταβλητών για να επιτρέψει το σύστημα να τρέξει το σύστημα. Θα κληθούν σε διάφορες στιγμές κατά τη διάρκεια του κώδικα, έτσι ώστε να μπορούν να διερευνηθούν.

 var inc = 0,1;
var scl = 100, zoff = 0;
var cols, σειρές, κίνηση = 0;
var σωματίδια = [];
VAR Flowfield.
var img;
var maxpeed;
var t, calcx = 0, calcy = 0, currx = 0, curry = 0, targetx = 0, Targety = 0; 

09. Ρυθμίστε όλα αυτά

Η λειτουργία ρύθμισης, που δηλώνεται εδώ, ορίζει τον τρόπο εμφάνισης της οθόνης. Η πρώτη ανίχνευση γίνεται είναι να δούμε τι είναι το πλάτος της οθόνης. Εάν είναι σχετικά μεγάλο, έχει φορτωθεί μια μεγάλη εικόνα, δημιουργείται ο καμβάς και αυτό είναι κλιμακωμένο μέσω CSS για να ταιριάζει μέσα στην οθόνη.

 Ρύθμιση λειτουργίας () {
  Εάν (WindowWidth & GT, 1200) {
  img = φορτίο ("περιουσιακά στοιχεία / studio.png").
  var καμβά = createcanvas (1920, 630);
  maxspeed = 10.5;
  } 

10. Άλλες οθόνες

Η υπόλοιπη δήλωση αν ελέγχει διαφορετικές αναλύσεις οθόνης και φορτώνει μια εικόνα που είναι πιο κατάλληλη για αυτό το μέγεθος της οθόνης. Ομοίως δημιουργούνται στοιχεία διαφορετικού μεγέθους καμβά. Αυτό είναι κυρίως για να σταματήσει ένα κινητό που ασχολείται με περισσότερα εικονοστοιχεία από ό, τι πρέπει.

 αλλιώς εάν (windowwidth & gt; 900) {
  img = φορτίο ("περιουσιακά στοιχεία / studio-tablet-wide.png");
  var καμβά = createcanvas (1200, 394);
  SCL = 60;
  maxspeed = 7;
  } αλλιώς {
  img = φορτίο ("περιουσιακά στοιχεία / στούντιο-tablet-tall.png");
  var καμβά = createcanvas (700, 230);
  SCL = 40;
  maxspeed = 5;
  } 

11. Κάντε ένα πλέγμα

Μόλις επεξεργαστείτε το μέγεθος της οθόνης, ο καμβάς τοποθετείται μέσα στην ετικέτα DIV της κεφαλίδας στη σελίδα Index.html. Ορισμένες στήλες και σειρές επεξεργάζονται με βάση το πλάτος και το ύψος. Είναι λίγο σαν ένα αόρατο πλέγμα. Τέλος, ένας πίνακας έχει οριστεί για το πεδίο ροής.

 καμβά («κεφαλίδα»).
Cols = πάτωμα (πλάτος / SCL);
σειρές = πάτωμα (ύψος / scl).
Flowfield = Νέα συστοιχία (Cols); 

12. Κάνετε σωματίδια

Ο αριθμός των σωματιδίων ρυθμίζεται με βάση το πλάτος της οθόνης - εάν η οθόνη είναι πλάτος 2000 pixel, τότε θα δημιουργηθούν 2500 σωματίδια και θα μετακινηθεί προς τα κάτω από εκεί. Α για βρόχο δημιουργεί τα νέα σωματίδια. Το χρώμα του φόντου της οθόνης έχει ρυθμιστεί σε σχεδόν πλήρες λευκό.

 var numparticles = math.floor ((2500/1920) * πλάτος);
  για (var i = 0, i & lt; numparticles; i ++) {
  σωματίδια [i] = νέο σωματίδιο ();
  }
  Ιστορικό (245);
} 

13. Σχεδιάστε την οθόνη

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

 Λειτουργία κλήσης () {
  nostroke ();
  Συμπληρώστε (245, 10).
  (0, 0, πλάτος, ύψος);
  nofill ();
  var yoff = 0; 

14. Δημιουργήστε ένα αποτέλεσμα ροής

Για να πάρετε το αποτέλεσμα της ροής υπάρχουν δύο βρόχοι 'για' που κινούνται μέσω των σειρών και των στηλών για να ενημερώσετε τις τιμές θορύβου. Αυτά στη συνέχεια αλλάζουν σε γωνίες από την τιμή θορύβου έτοιμη για να ενημερώσει τα σωματίδια για κάθε μία από τις θέσεις στην οθόνη.

 για (var y = 0, y & lt; σειρές, y ++) {
  var xoff = 0;
  για (var x = 0, x & lt; cols, x ++) {
  var index = (x + y * cols);
  var γωνία = θόρυβος (xoff, yoff, zoff) * δύο_pi * 4;
  var v = p5.vector.fromangle (γωνία); 

15. Ενημερώστε τη συστοιχία

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

 v.setmag (1);
  Flowfield [δείκτη] = v;
  xoff + = inc;
  }
  yoff + = = inc;
  zoff + = 0,001;
  } 

16. Ενημερώστε τα σωματίδια

Τώρα τα σωματίδια είναι όλα βρόχους στη διάταξη τους. Κάθε μεμονωμένο σωματίδιο λέγεται να ακολουθήσει το πεδίο ροής, για ενημέρωση, ελέγξτε τις άκρες της οθόνης, διασκορπίστε ελαφρά και τελικά στην οθόνη χρησιμοποιώντας τη λειτουργία εμφάνισης. Αποθηκεύστε το αρχείο και δοκιμάστε το 'index.html' για να δείτε τα σωματίδια που κινούνται.

 για (var i = 0, I & lt; σωματίδια.length, i ++) {
  σωματίδια [i] .Follow (Flowfield);
  σωματίδια [i] .update ();
  σωματίδια [i] .Edges ();
  σωματίδια [i] .scatter ();
  σωματίδια [i] .show ();
  }
} 

17. Προσθέστε το κείμενο

Το κείμενο είναι μια μάσκα που τοποθετείται πάνω από την κορυφή. Για να το κάνετε αυτό, η σωστή εικόνα τοποθετείται πάνω από το πάνω μέρος των σωματιδίων. Προσθέστε αυτόν τον κώδικα πριν από τη λειτουργία κλεισίματος της λειτουργίας της κλήρωσης. Αποθηκεύστε και ελέγξτε το πρόγραμμα περιήγησης για να δείτε το αποτέλεσμα που λειτουργεί με το κείμενο τώρα.

 Εικόνα (IMG, 0, 0); 

18. Εντοπίστε τη θέση του ποντικιού

Η θέση του ποντικιού αναφέρεται και οι τιμές Χ και Υ αντιστοιχίζονται σε γωνίες βαθμού που μπορούν να μετακινηθούν. Στον άξονα Υ αυτό θα είναι -25 έως 25 και αντίστροφα για τον άξονα Χ. Ο υπόλοιπος κώδικας θα πρέπει να τοποθετηθεί μετά την προσθήκη του τελευταίου κώδικα, πριν από το τέλος της λειτουργίας της κλήρωσης.

 Targety = Math.Round (Map (Mousex, 0, Πλάτος, -25, 25));
targetx = math.round (χάρτης (ποντίκι, 0, ύψος, 25, -25)); 

19. Ευκολία στη θέση του

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

 var vx = (Targetx - Currx) * 0,05;
var vy = (Targety - Curry) * 0,05;
calcx + = vx;
Calcy + = VY; 

20. Γράψτε το CSS

Η μεταβλητή «T» εδώ παίρνει τις υπολογισμένες τιμές και τις τοποθετεί σε μια συμβολοσειρά CSS χρησιμοποιώντας τις τιμές μετασχηματισμού του Rotatex και της περιστροφής. Η τρέχουσα θέση υπολογίζεται από τη θέση ο καμβάς περιστρέφεται προς το παρόν.

 t = 'Rotatex (' + Calcx + 'deg) Περιστροφή (' + Calcy + 'DEG)'.
curr = calcx;
Curry = ασβεστοποίηση; 

21. Τελειώστε

Τώρα το CSS εφαρμόζεται στο στοιχείο καμβά σε αυτόν τον κώδικα. Αποθηκεύστε τη σελίδα και προεπισκόπηση αυτού στο πρόγραμμα περιήγησης. Τώρα το ποντίκι ενημερώνει πλήρως την περιστροφή του καμβά έτσι ώστε να γυρίζει καθώς το ποντίκι κινείται. Φυσικά όλα τα σωματίδια σε αυτό το διάστημα κινούνται μαζί της στην οθόνη.

 canvas.style.webkitransform = t;
canvas.style.mstransform = t;
canvas.style.transform = t; 

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο Creative Web Design Web Design Web Designer. Αγορά Τεύχος 271 ή Εγγραφείτε .

Σχετικά Άρθρα:

• 70 καλύτερες δωρεάν γραμματοσειρές για τους σχεδιαστές
• 6 βήματα για την τέλεια εμπειρία ανάγνωσης στο διαδίκτυο
• Το δωρεάν ηλεκτρονικό εργαλείο σας δείχνει τι μπορούν να κάνουν οι γραμματοσειρές σας