Πώς να δημιουργήσετε ένα εφέ γραφομηχανής με το CSS

Τα Cascading Style Sheets (CSS) έχουν διανύσει πολύ δρόμο από την έναρξή τους. Υπάρχουν πράγματα που είναι δυνατά μόνο με το CSS για τα οποία μπορεί να μην γνωρίζετε, χάρη στη συνεχή εξέλιξη και βελτίωση της γλώσσας.

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

Τι είναι το εφέ της γραφομηχανής;

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

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

Πώς λειτουργεί η συνάρτηση CSS step()

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

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

 animation-timing-function: steps(n, direction)

Στο παραπάνω μπλοκ κώδικα, η συνάρτηση step() έχει δύο παραμέτρους και συγκεκριμένα: n και κατεύθυνση. Η παράμετρος κατεύθυνσης μπορεί να είναι είτε αρχή είτε τέλος.

Η ρύθμιση της κατεύθυνσης έναρξης διασφαλίζει ότι το πρώτο βήμα ολοκληρώνεται αμέσως μόλις ξεκινήσει η κινούμενη εικόνα. Ενώ, η ρύθμιση της κατεύθυνσης για το τέλος θα εκτελέσει το τελευταίο βήμα καθώς τελειώνει η κινούμενη εικόνα. Για να δείξετε τη σημασία της συνάρτησης Steps(), ρίξτε μια ματιά στον ακόλουθο κώδικα HTML:

 <div class="container">
  <div></div>
</div>

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

 .container {
    background-color: blue;
}
div:not(.container) {
    background-color: red;
    width: 88px;
    height: 88px;
    animation: movebox 4s infinite;
}
@keyframes movebox {
    100% {
        transform: translateX(100vw);
    }
}
 

Το παραπάνω μπλοκ κώδικα χρησιμοποιεί τον κανόνα @keyframes για να ορίσει μια κινούμενη εικόνα με το όνομα movebox. Αυτό το κινούμενο σχέδιο εφαρμόζεται στη συνέχεια στο παιδικό div, με αποτέλεσμα να κινείται ομαλά στην οθόνη σε έναν άπειρο βρόχο.

Εάν δεν σας αρέσει η ομαλή κινούμενη εικόνα και θέλετε να επιτύχετε ένα «ακατάστατο» εφέ, μπορείτε να χρησιμοποιήσετε τη συνάρτηση step() ως εξής:

 div:not(.container){
    background-color: red;
    width: 88px;
    height: 88px;
    animation: movebox 4s infinite;
    animation-timing-function: steps(10, end);
}

Όπως μπορείτε να δείτε στο GIF παρακάτω, η ενσωμάτωση της συνάρτησης step() με τιμή παραμέτρου 10 θα κινήσει το παιδί div σε βήματα αντί για ομαλή κίνηση. Όσο μεγαλύτερος είναι ο αριθμός των βημάτων, τόσο λιγότερο ασταθής θα φαίνεται η κινούμενη εικόνα σας.

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

Δημιουργία του εφέ γραφομηχανής

Τώρα που καταλαβαίνετε πώς λειτουργεί η συνάρτηση Steps(), ήρθε η ώρα να εφαρμόσετε όλα όσα μάθατε στην πράξη. Δημιουργήστε έναν νέο φάκελο και δώστε του ένα κατάλληλο όνομα. Σε αυτόν τον φάκελο, προσθέστε ένα αρχείο index.htm για σήμανση και ένα αρχείο style.css για στυλ.

Στο αρχείο index.htm, προσθέστε τον ακόλουθο κώδικα boilerplate:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-create-a-typewriter-effect-with-css/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="text">
        Lorem ipsum dolor sit amet consectetur 
        adipisicing elit. Reiciendis, tempore! 
      </div>
    </div>
  </body>
</html> 

Το παραπάνω μπλοκ κώδικα ορίζει τη σήμανση για έναν απλό ιστότοπο HTML. Υπάρχει ένα κοντέινερ div που περιέχει ένα άλλο div με κάποιο εικονικό κείμενο.

Εμψύχωση του κειμένου

Ανοίξτε το αρχείο styles.css και ορίστε το πλάτος του κοντέινερ div στο πλάτος των περιεχομένων του.

 .container{
    width: fit-content;
}

Στη συνέχεια, χρησιμοποιώντας τον κανόνα @keyframes, ορίστε μια κινούμενη εικόνα που ελέγχει την εξέλιξη της κινούμενης εικόνας με την πάροδο του χρόνου. Ρυθμίστε το πλάτος στο “0%” στο 0%. Στο 100%, ορίστε το πλάτος σε “100%” ως εξής:

 @keyframes type-text {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

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

Αυτό το περίγραμμα θα δώσει την εμφάνιση δρομέα. Ορίστε το κατάλληλο μέγεθος γραμματοσειράς και την ιδιότητα κινούμενης εικόνας σε κείμενο τύπου. Τέλος, προσθέστε τη συνάρτηση step() στη συνάρτηση animation-timing-function.

 .text {
  overflow: hidden;
  white-space: nowrap;
  font-family: "Courier New", Courier, monospace;
  border-right: solid 10px green;
  font-size: 23px;
  animation: type-text forwards 4s;
  animation-timing-function: steps(40);
}

Όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης, αυτό είναι που πρέπει να δείτε:

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

Ζωντανεύοντας τον Δρομέα

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

 @keyframes cursor-blink {
    0% {
        border-color: transparent;
    }
    100% {
        border-color: green;
    }
}
 

Αφού ορίσετε την προσαρμοσμένη κινούμενη εικόνα, προσθέστε το όνομα της κινούμενης εικόνας στην ιδιότητα κινούμενης εικόνας στην κλάση κειμένου και ορίστε τη διάρκεια σε 0,6 δευτερόλεπτα.

 .text{
    
    animation: type-text forwards 4s,
             cursor-blink .6s infinite;
}

Τώρα, όταν εκτελείτε τον κώδικα, θα πρέπει να δείτε έναν δρομέα που αναβοσβήνει.

Η δύναμη των λειτουργιών CSS

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

Από χρωματικούς χειρισμούς έως ανταποκρινόμενες διατάξεις, κινούμενα σχέδια και δημιουργικούς μετασχηματισμούς, οι λειτουργίες CSS έχουν επεκτείνει τις δυνατότητες του σχεδιασμού ιστοσελίδων. Με λειτουργίες όπως το calc() για ευέλικτους υπολογισμούς, το linear-gradient() για εντυπωσιακά φόντο και το translate() για συναρπαστικά κινούμενα σχέδια, μπορείτε να δημιουργήσετε οπτικά ελκυστικές και ελκυστικές εμπειρίες χρήστη.