Δεν χρειάζεστε JavaScript για να δημιουργήσετε το κλασικό εφέ της γραφομηχανής. Μάθετε πώς να το κάνετε μόνο με CSS χρησιμοποιώντας τη συνάρτηση Steps().
Τα Cascading Style Sheets (CSS) έχουν διανύσει πολύ δρόμο από την έναρξή τους. Υπάρχουν πράγματα που είναι δυνατά μόνο με το CSS για τα οποία μπορεί να μην γνωρίζετε, χάρη στη συνεχή εξέλιξη και βελτίωση της γλώσσας.
Μία από τις πιο αξιοσημείωτες εξελίξεις στο CSS είναι η εμφάνιση και η τελειοποίηση των λειτουργιών CSS, οι οποίες έχουν επεκτείνει σημαντικά τις δυνατότητες και τη δύναμη της διαμόρφωσης περιεχομένου ιστού.
Τι είναι το εφέ της γραφομηχανής;
Το εφέ της γραφομηχανής είναι μια τεχνική κινούμενης εικόνας που προσομοιώνει τη διαδικασία του περιεχομένου που αποκαλύπτεται σταδιακά, μιμούμενο την πράξη της πληκτρολόγησης καθώς ξεδιπλώνεται μπροστά στα μάτια του θεατή. Αυτό το εφέ θυμίζει παλιές γραφομηχανές, πρώιμα τερματικά υπολογιστών ή Διεπαφές γραμμής εντολών (CLI).
Η σταδιακή εμφάνιση του κειμένου προσθέτει ένα στοιχείο σασπένς και ίντριγκας, ενθαρρύνοντας το κοινό να δώσει μεγάλη προσοχή στο μήνυμα που εκτυλίσσεται.
Πώς λειτουργεί η συνάρτηση CSS step()
Οι συναρτήσεις στο CSS εισάγουν ένα επίπεδο ευελιξίας που προηγουμένως ήταν δύσκολο να επιτευχθεί χρησιμοποιώντας μόνο στατικά στυλ. ο βήματα () Η λειτουργία είναι μια δημοφιλής συνάρτηση που χρησιμοποιείται σε κινούμενα σχέδια CSS. Κάνει τα κινούμενα σχέδια να φαίνονται σαν να προχωρούν σε διακριτά, διακριτά βήματα αντί για ομαλή μετάβαση.
βήματα () είναι μια συνάρτηση χρονισμού κινούμενης εικόνας που λαμβάνει δύο παραμέτρους. Η πρώτη παράμετρος υποδηλώνει τον αριθμό των βημάτων που θέλετε να κάνει η κινούμενη εικόνα σας. Η δεύτερη παράμετρος καθορίζει τη συμπεριφορά κάθε βήματος. Η σύνταξη για το βήματα () οι λειτουργίες μοιάζουν με αυτό:
animation-timing-function: steps(n, direction)
Στο μπλοκ κώδικα παραπάνω, το βήματα () Η συνάρτηση έχει δύο παραμέτρους και συγκεκριμένα: n και κατεύθυνση. ο κατεύθυνση παράμετρος μπορεί είτε να είναι αρχή ή τέλος.
Ρύθμιση του κατεύθυνση προς την αρχή διασφαλίζει ότι το πρώτο βήμα ολοκληρώνεται αμέσως μόλις ξεκινήσει η κινούμενη εικόνα. Ενώ, η ρύθμιση του κατεύθυνση προς την τέλος θα εκτελέσει το τελευταίο βήμα καθώς τελειώνει η κινούμενη εικόνα. Για να καταδείξουμε τη σημασία του βήματα () λειτουργία, ρίξτε μια ματιά στον ακόλουθο κώδικα HTML:
<divclass="container">
<div>div>
div>
Το μπλοκ κώδικα παραπάνω ορίζει α δοχείο div με ένα παιδί div. Εάν θέλετε το παιδί div να γλιστράει στην οθόνη, χρησιμοποιείτε κινούμενα σχέδια CSS όπως αυτό:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Το παραπάνω μπλοκ κώδικα χρησιμοποιεί το Κανόνας @keyframes για να ορίσετε μια κινούμενη εικόνα ονομάστηκε κινούμενο κουτί. Αυτό το κινούμενο σχέδιο εφαρμόζεται στη συνέχεια στο παιδικό div, με αποτέλεσμα να κινείται ομαλά στην οθόνη σε έναν άπειρο βρόχο.
μέσω GIPHY
Εάν δεν σας αρέσει η ομαλή κινούμενη εικόνα και θέλετε να επιτύχετε ένα "ακατάστατο" εφέ, μπορείτε να χρησιμοποιήσετε το βήματα () λειτουργεί ως εξής:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}
Όπως μπορείτε να δείτε στο GIF παρακάτω, ενσωματώνοντας το βήματα () συνάρτηση με τιμή παραμέτρου 10 θα κινήσει το παιδί div σε βήματα αντί για ομαλή κίνηση. Όσο μεγαλύτερος είναι ο αριθμός των βημάτων, τόσο λιγότερο ασταθής θα φαίνεται η κινούμενη εικόνα σας.
μέσω GIPHY
Στο παραπάνω παράδειγμα, το κατεύθυνση παρέχεται παράμετρος. Ωστόσο, εάν παραλείψετε το κατεύθυνση, θα χρησιμοποιήσει το πρόγραμμα περιήγησης τέλος ως προεπιλεγμένη τιμή για κατεύθυνση.
Δημιουργία του εφέ γραφομηχανής
Τώρα που καταλαβαίνετε πώς το βήματα () η λειτουργία λειτουργεί, είναι καιρός να εφαρμόσετε όλα όσα μάθατε στην πράξη. Δημιουργήστε έναν νέο φάκελο και δώστε του ένα κατάλληλο όνομα. Σε αυτόν τον φάκελο, προσθέστε ένα ευρετήριο.htm αρχείο για σήμανση και α στυλ.css αρχείο για styling.
Στο ευρετήριο.htm αρχείο, προσθέστε τον ακόλουθο κώδικα λέβητα:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<divclass="container">
<divclass="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
div>
div>
body>
html>Το μπλοκ κώδικα παραπάνω ορίζει τη σήμανση για το a απλός ιστότοπος HTML. Υπάρχει ένα δοχείο div που περιέχει ένα άλλο div με κάποιο εικονικό κείμενο.
Εμψύχωση του κειμένου
Ανοιξε το στυλ.css αρχείο και ορίστε το πλάτος του δοχείο div στο πλάτος του περιεχομένου του.
.container{
width: fit-content;
}
Στη συνέχεια, χρησιμοποιώντας το @keyframes κανόνα, ορίστε μια κινούμενη εικόνα που ελέγχει τον τρόπο με τον οποίο εξελίσσεται η κινούμενη εικόνα με την πάροδο του χρόνου. Ορίστε το πλάτος σε "0%" στο 0%. Στο 100%, ορίστε το πλάτος σε "100%" ως εξής:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Στη συνέχεια, επιλέξτε το στοιχείο με το όνομα της κλάσης κείμενο και ρυθμίστε το ξεχείλισμα ιδιοκτησία σε κρυμμένος. Κάνοντας αυτό θα βεβαιωθείτε ότι το κείμενο παραμένει κρυφό όσο δεν έχει ξεκινήσει το εφέ πληκτρολόγησης. Αφού το κάνετε αυτό, βεβαιωθείτε ότι το κείμενο παραμένει σε μία γραμμή ορίζοντας το κενό διάστημα ιδιοκτησία σε nowrap. Δίνω το κείμενο ταξινομήστε μια γραμματοσειρά monospace και προσθέστε ένα πράσινο κάθετο περίγραμμα στα δεξιά του κειμένου.
Αυτό το περίγραμμα θα δώσει την εμφάνιση δρομέα. Ρυθμίστε το κατάλληλο μέγεθος γραμματοσειράς και το κινουμένων σχεδίων ιδιοκτησία σε τύπος-κείμενο. Τέλος, προσθέστε το βήματα () λειτουργία στο animation-timing-function.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "CourierNew", Courier, monospace;
border-right: solid 10pxgreen;
font-size: 23px;
animation: type-textforwards 4s;
animation-timing-function: steps(40);
}
Όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης, αυτό είναι που πρέπει να δείτε:
μέσω GIPHY
Εάν θέλετε μεγαλύτερο εφέ πληκτρολόγησης, μπορείτε να προσαρμόσετε τη διάρκεια της κινούμενης εικόνας και τον αριθμό των βημάτων που καθορίζονται στο βήματα () λειτουργία.
Ζωντανεύοντας τον Δρομέα
Το εφέ της γραφομηχανής έχει σχεδόν ολοκληρωθεί, αν και λείπει ένα χαρακτηριστικό, που είναι ο δρομέας που αναβοσβήνει. Θυμηθείτε ότι στο τελευταίο μπλοκ κώδικα, ορίστηκε ένα δεξιό περίγραμμα στο κείμενο για να χρησιμεύσει ως δρομέας. Μπορείτε να προσθέσετε μια κίνηση σε αυτόν τον κέρσορα χρησιμοποιώντας το @keyframes κανόνα επίσης.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Αφού ορίσετε την προσαρμοσμένη κινούμενη εικόνα, προσθέστε το όνομα της κινούμενης εικόνας στο κινουμένων σχεδίων ιδιοκτησία στο κείμενο τάξη και ορίστε τη διάρκεια σε 0,6 δευτερόλεπτα.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Τώρα, όταν εκτελείτε τον κώδικα, θα πρέπει να δείτε έναν δρομέα που αναβοσβήνει.
μέσω GIPHY
Η δύναμη των λειτουργιών CSS
Οι λειτουργίες CSS έχουν φέρει επανάσταση στον τρόπο κατασκευής των ιστοσελίδων, προσφέροντας μια αξιοσημείωτη εργαλειοθήκη σε εσάς ως προγραμματιστή. Αυτές οι ευέλικτες λειτουργίες επιτρέπουν δυναμικό στυλ και αλληλεπιδράσεις που κάποτε προορίζονταν για πολύπλοκες γλώσσες δέσμης ενεργειών.
Από χρωματικούς χειρισμούς έως ανταποκρινόμενες διατάξεις, κινούμενα σχέδια και δημιουργικούς μετασχηματισμούς, οι λειτουργίες CSS έχουν επεκτείνει τις δυνατότητες του σχεδιασμού ιστοσελίδων. Με συναρτήσεις όπως calc() για ευέλικτους υπολογισμούς, linear-gradient() για εντυπωσιακά υπόβαθρα και translate() για συναρπαστικά κινούμενα σχέδια, μπορείτε να δημιουργήσετε οπτικά ελκυστικό και ελκυστικό χρήστη εμπειρίες.
