بنر

آموزش های دیگر:

  1. نمایش منو های متفاوت در صفحات مختلف سایت در وردپرس
  2. مقایسه ی Angular با React || کدام یک بهتر است؟
  3. آموزش نمایش پست های وردپرس بصورت Grid یا شبکه ای
  4. آموزش ساخت لیست علاقه مندی محصولات در ووکامرس

جدول محتوایی

افکت تایپ 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 یک افکت تایپ بسازیم. اگر سوالی دارید، در بخش نظرات با ما به اشتراک بگذارید.

 

180رای - امتیاز 3.1 ممنون از امتیازی که دادید..!

دسته بندی شده در:

HTML CSSآموزشیبرنامه نویسی

برچسب شده در:

, , , , , , , , , , ,