برای ایجاد افکت ماشین تحریر کلاسیک به جاوا اسکریپت نیاز ندارید. یاد بگیرید که چگونه این کار را فقط با CSS با استفاده از تابع step() انجام دهید.
برگه‌های سبک آبشاری (CSS) از زمان پیدایش خود، راه طولانی را پیموده است. چیزهایی وجود دارد که فقط با CSS امکان پذیر است که ممکن است به لطف تکامل و بهبود مستمر زبان در مورد آنها ندانید.
یکی از برجسته ترین پیشرفت ها در CSS ظهور و اصلاح توابع CSS است که قابلیت ها و قدرت سبک سازی محتوای وب را به طور قابل توجهی گسترش داده است.
اثر ماشین تحریر چیست؟
افکت ماشین تحریر یک تکنیک انیمیشن متنی است که فرآیند افشای محتوا را به صورت تدریجی شبیه‌سازی می‌کند و از عمل تایپ کردن در مقابل چشمان بیننده تقلید می‌کند. این اثر یادآور ماشین‌های تحریر قدیمی، پایانه‌های رایانه اولیه یا رابط‌های خط فرمان (CLI) است.
ظاهر تدریجی متن عنصری از تعلیق و دسیسه را اضافه می کند و مخاطب را تشویق می کند که به پیام آشکار شده توجه کند.
عملکرد CSS step() چگونه کار می کند
توابع در CSS سطحی از انعطاف‌پذیری را معرفی می‌کنند که قبلاً دستیابی به آن تنها با استفاده از سبک‌های استاتیک چالش برانگیز بود. تابع step() یک تابع محبوب است که در انیمیشن های CSS استفاده می شود. این باعث می‌شود انیمیشن‌ها به‌جای انتقال هموار، در مراحل مجزا و مجزا پیشروی کنند.
step() یک تابع زمان بندی انیمیشن است که در دو پارامتر می باشد. پارامتر اول تعداد مراحلی را که می خواهید انیمیشن شما انجام دهد را نشان می دهد. پارامتر دوم رفتار هر مرحله را مشخص می کند. سینتکس توابع step() به شکل زیر است:
animation-timing-function: steps(n, direction)
در بلوک کد بالا، تابع step() دارای دو پارامتر است: n و جهت. پارامتر جهت می تواند شروع یا پایان باشد.
تنظیم جهت شروع به شما اطمینان می دهد که مرحله اول به محض شروع انیمیشن کامل می شود. در حالی که، تنظیم جهت به پایان، آخرین مرحله را با پایان انیمیشن اجرا می کند. برای نشان دادن اهمیت تابع step()، به کد 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 استفاده می کند. سپس این انیمیشن بر روی Child Div اعمال می‌شود و باعث می‌شود که به آرامی در سراسر صفحه در یک حلقه بی‌نهایت حرکت کند.
از طریق GIPHY
اگر انیمیشن صاف را دوست ندارید و می‌خواهید به یک افکت «متوقف» برسید، می‌توانید از تابع 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 فرزند را در مراحل متحرک می کند. هرچه تعداد مراحل بیشتر باشد، انیمیشن شما کمتر متلاطم به نظر می رسد.
از طریق GIPHY
در مثال بالا، پارامتر جهت ارائه شده است. با این حال، اگر جهت را حذف کنید، مرورگر از end به عنوان مقدار پیش فرض جهت استفاده می کند.
ایجاد افکت ماشین تحریر
اکنون که متوجه شدید که تابع step() چگونه کار می کند، وقت آن است که همه چیزهایی را که یاد گرفتید در عمل پیاده کنید. یک پوشه جدید ایجاد کنید و نام مناسبی به آن بدهید. در آن پوشه، یک فایل 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="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%;
}
}
در مرحله بعد، عنصر با متن نام کلاس را انتخاب کنید و ویژگی overflow را روی hidden قرار دهید. با انجام این کار مطمئن می شوید که تا زمانی که جلوه تایپ شروع نشده است، متن پنهان می ماند. پس از انجام این کار، با تنظیم ویژگی spacespace روی nowrap، مطمئن شوید که متن در یک خط باقی می ماند. به کلاس متن یک فونت monospace بدهید و یک حاشیه سبز عمودی در سمت راست متن اضافه کنید.
این حاشیه ظاهر یک مکان نما را نشان می دهد. اندازه فونت مناسب و ویژگی animation را روی type-text تنظیم کنید. در نهایت تابع step() را به تابع animation-timing اضافه کنید.
.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);
}
وقتی کد را در مرورگر اجرا می کنید، این چیزی است که باید ببینید:
از طریق GIPHY
اگر می‌خواهید جلوه‌های تایپ طولانی‌تری داشته باشید، می‌توانید مدت زمان انیمیشن و تعداد مراحل مشخص‌شده در تابع step() را تنظیم کنید.
زنده کردن مکان نما
افکت ماشین تحریر تقریباً کامل شده است، اگرچه یک ویژگی از دست رفته وجود دارد که مکان نما چشمک زن است. به یاد بیاورید که در آخرین بلوک کد، یک حاشیه به سمت راست روی متن تنظیم شده بود تا به عنوان مکان نما عمل کند. همچنین می توانید با استفاده از قانون keyframes@ یک انیمیشن به این مکان نما اضافه کنید.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
پس از تعریف انیمیشن سفارشی، نام انیمیشن را به ویژگی animation در کلاس text اضافه کنید و مدت زمان را 0.6 ثانیه تنظیم کنید.
.text{
/* Other style rules*/
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
حالا وقتی کد را اجرا می کنید، باید مکان نما چشمک زن را ببینید.
از طریق GIPHY
قدرت توابع CSS
توابع CSS روش ساخت وب سایت ها را متحول کرده است و یک جعبه ابزار قابل توجه را به شما به عنوان یک توسعه دهنده ارائه می دهد. این توابع همه کاره استایل پویا و تعاملاتی را که زمانی برای زبان های برنامه نویسی پیچیده محفوظ بود، امکان پذیر می کند.
از دستکاری رنگ گرفته تا طرح‌بندی‌های واکنش‌گرا، انیمیشن‌ها و تغییرات خلاقانه، توابع CSS امکانات طراحی وب را گسترش داده‌اند. با توابعی مانند calc() برای محاسبات انعطاف پذیر، linear-gradient() برای پس زمینه های خیره کننده و translate() برای انیمیشن های فریبنده، می توانید تجربه های بصری جذاب و جذابی برای کاربر ایجاد کنید.