جدول محتوایی
افکت تایپ CSS
در این مقاله، یاد خواهید گرفت که چگونه با استفاده از ساخت افکت تایپ با CSS خام، ظاهر وب سایت خود را پویا و جذاب تر کنید.
این افکت به گونه ایست که شما فکر میکنید متنی در حال تابپ شدن است.
افزودن افکت تایپ به تکه هایی از متن میتواند به جذب بازدیدکنندگان وبسایت شما کمک کند و آنها را به خواندن بیشتر علاقه مند کند. افکت تایپ را می توان برای اهداف بسیاری استفاده کرد، مانند ساخت صفحات فرود جذاب، عناصر فراخوان برای اقدام، وب سایت های شخصی و نمایش کد.
ایجاد افکت تابپ آسان است.
ساخت افکت ماشین تحریر آسان است و تنها چیزی که برای درک این آموزش نیاز دارید، دانش اولیه انیمیشن ها در CSS و CSS خام است.
روشی که افکت تایپ کار می کند به این صورت است:
- انیمیشن تایپ قرار است عنصر متن ما را با تغییر عرض آن از 0 به 100٪، گام به گام، با استفاده از تابع CSS step() نشان دهد.
ایجاد صفحه وب برای ساخت افکت تایپ ما
بیایید ابتدا صفحه وب را برای نسخه ی نمایشی افکت خود ایجاد کنیم. که شامل یک تگ <div> برای متن ما با یک کلاس به نام typed-out است:
<!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html>
استایل دهی به container
اکنون که طرح اولیه صفحه وب را داریم، بیایید <div> را با کلاس “typed-out” استایل کنیم:
.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}
توجه داشته باشید که برای اینکه افکت تایپ کار کند، موارد زیر را اضافه کرده ایم:
- “overflow: hidden;” و یک “width: 0;”، برای اطمینان از اینکه محتوای متن تا زمانی که جلوه تایپ شروع نشده است، نمایش داده نمی شود.
- برای ایجاد مکاننمای تایپ، “border-right: 0.15em solid orange;”
قبل از ایجاد جلوه تایپ، برای اینکه مکان نما را در آخرین حرف عنصر typed-out پس از تایپ کامل متوقف کنیم، یک container برای آن ایجاد می کنیم.
.container {
display: inline-block;
}
ساخت انیمیشن متن آشکار
انیمیشن تایپ قرار است جلوه متن را در داخل عنصر typed-out، حرف به حرف ایجاد کند. ما از قانون انیمیشن CSS@keyframes استفاده خواهیم کرد:
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
همانطور که می بینید، تمام کاری که این انیمیشن انجام می دهد این است که عرض یک عنصر را از 0 به 100٪ تغییر می دهد.
اکنون، ما این انیمیشن را در کلاس typed-out خود قرار می دهیم و جهت انیمیشن آن را به forward تنظیم می کنیم تا مطمئن شویم که عنصر متن به width: 0 پس از پایان انیمیشن باز نمی گردد:
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation: typing 1s forwards;
}
همانطور که میبینید، این افکت تایپ به زیبایی کار میکند:
See the Pen
Smooth step by SitePoint (@SitePoint)
on CodePen.
به همین سادگی توانستیم فقط با CSS یک افکت تایپ بسازیم. اگر سوالی دارید، در بخش نظرات با ما به اشتراک بگذارید.
مثل همیشه عالی و جذاب
سلام به تیم ایرانکاسرور ممنون از پست خوبتون
عالی عالی ممنون
ممنون جالب بود
ممنون جالب بود
عالی عالی ممنون
ممنون خدا قوت
سلام وقتتون بخیر، من بلد نیستم این کد هارو ترکیب کنم تا نتیجه نهایی درست شه، لطفا این کد ها رو یکجا قرار بدید داخل کامنت ها من کامل کپی کنم و تو سایت قرار بدم دستتون درد نکنه
سلام وقت شما هم بخیر دوست عزیز. لطفا ایمیلتون رو چک کنید. توضیحات لازم در ایمیل داده شده. با تشکر!
سلام وقتتون بخیر نتونستم کامل کنم لطفا کد ها رو یکجا قرار بدید من کپی کنم بعد متن رو ویرایش میکنم
توی ایمیلی که براتون فرستادم، یه فایل وجود داره…اون فایل رو با یه ویرایشگر کد مثل VS Code باز کنید و کد ها رو ببینید.
سلام میبخشید من برنامه ای وجود داره که گوشی اینکار رو انجام بدم، اگه وجود داره ممنون میشم معرفی کنید و اون فایل رو مجددا ایمیل میکنید؟
سلام اگه همینکارو بخوایم روی متن فارسی پیاده سازی کنیم و این افکت از راست به چپ بخواد اجرا بشه چه المان هایی باید تغییر پیدا کنه؟