אתה לא צריך JavaScript כדי ליצור את אפקט מכונת הכתיבה הקלאסי. למד כיצד לעשות זאת עם CSS בלבד באמצעות הפונקציה steps() .

גיליונות סגנון מדורגים (CSS) עברה דרך ארוכה מאז הקמתה. ישנם דברים אפשריים רק עם CSS שאולי לא ידעתם עליהם, הודות להתפתחות המתמשכת והשיפור של השפה.

אחת ההתקדמות הבולטות ביותר ב-CSS היא הופעתן ושכלולן של פונקציות CSS, שהרחיבו משמעותית את היכולות והעוצמה של עיצוב תוכן אינטרנט.

מהו אפקט מכונת הכתיבה?

אפקט מכונת הכתיבה הוא טכניקת אנימציית טקסט המדמה את תהליך חשיפת התוכן בהדרגה, מחקה את פעולת ההקלדה כפי שהיא מתגלה לנגד עיני הצופה. אפקט זה מזכיר מכונות כתיבה מהאסכולה הישנה, ​​מסופי מחשב מוקדמים, או ממשקי שורת פקודה (CLI).

ההופעה ההדרגתית של הטקסט מוסיפה אלמנט של מתח ותככים, ומעודדת את הקהל לשים לב היטב למסר המתגלה.

כיצד פועלת פונקציית ה-CSS steps()

פונקציות ב-CSS מציגות רמה של גמישות שבעבר הייתה מאתגרת להשיג באמצעות סגנונות סטטיים בלבד. ה שלבים() function היא פונקציה פופולרית המשמשת בהנפשות CSS. זה גורם לאנימציות להיראות כאילו הן מתקדמות בצעדים נפרדים, במקום לעבור בצורה חלקה.

שלבים()

instagram viewer
היא פונקציית תזמון אנימציה שמקבלת שני פרמטרים. הפרמטר הראשון מציין את מספר הצעדים שאתה רוצה שהאנימציה שלך תבצע. הפרמטר השני מגדיר את ההתנהגות של כל שלב. התחביר עבור ה שלבים() הפונקציות נראות כך:

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

בבלוק הקוד למעלה, ה- שלבים() לפונקציה יש שני פרמטרים כלומר: נ ו כיוון. ה כיוון פרמטר יכול להיות הַתחָלָה אוֹ סוֹף.

הגדרת ה כיוון ל הַתחָלָה מבטיח שהשלב הראשון יושלם ברגע שהאנימציה מתחילה. ואילו, הגדרת ה כיוון ל סוֹף יפעיל את השלב האחרון עם סיום האנימציה. כדי להמחיש את חשיבות ה שלבים() פונקציה, תסתכל על קוד ה-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 כלל להגדרת הנפשה בשם movebox. האנימציה הזו מוחלת לאחר מכן על ה-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

בדוגמה לעיל, ה כיוון פרמטר מסופק. עם זאת, אם תשמיט את ה כיוון, הדפדפן ישתמש סוֹף כערך ברירת המחדל עבור כיוון.

יצירת אפקט מכונת הכתיבה

עכשיו שאתה מבין איך שלבים() הפונקציה עובדת, הגיע הזמן ליישם את כל מה שלמדת בפועל. צור תיקיה חדשה ותן לה שם מתאים. בתיקייה זו, הוסף index.htm קובץ לסימון וא style.css קובץ לסטיילינג.

בתוך ה index.htm קובץ, הוסף את קוד ה-boilerplate הבא:

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 נוסף עם טקסט דמה כלשהו.

הנפשת הטקסט

פתח את ה styles.css קובץ וקבע את הרוחב של מְכוֹלָה div לרוחב תכולתו.

.container{
width: fit-content;
}

לאחר מכן, באמצעות @keyframes כלל, הגדר אנימציה השולטת כיצד האנימציה מתקדמת לאורך זמן. הגדר את הרוחב ל-"0%" ב 0%. בְּ 100%, הגדר את הרוחב ל-"100%" כך:

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

לאחר מכן, בחר את האלמנט עם שם המחלקה טֶקסט ולהגדיר את הצפה רכוש ל מוּסתָר. פעולה זו תוודא שהטקסט יישאר מוסתר כל עוד אפקט ההקלדה לא התחיל. לאחר שתעשה זאת, ודא שהטקסט יישאר בשורה אחת על ידי הגדרת ה רווח לבן רכוש ל nowrap. תן את טֶקסט סוג גופן מונוספייס והוסף גבול אנכי ירוק מימין לטקסט.

גבול זה ייתן מראה של סמן. הגדר את המתאים גודל גופן וה אנימציה רכוש ל הקלד-טקסט. לבסוף, הוסף את שלבים() פונקציה ל אנימציה-תזמון-פונקציה.

.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() עבור אנימציות שובות לב, אתה יכול ליצור משתמש מושך ומושך חזותית חוויות.