img

ساخت یک افکت متنی ماشین تحریر

/
/
/

محتویات متنی را طوری اضافه کنید که انگار در زمان واقعی تایپ شده اند.

۱- قالب سند
پروژه را با تعریف قالب سند  HTML استاندارد آغاز کنید ، این قالب، بخش عنوان و بدنه را شامل می شود. بخش عنوان، اطلاعات توصیفی و لینک ها برای منابع را شامل می شود و در این حالت، به برگه سبک  CSS خارجی وصل می شود. بدنه سند نیز المان های محتوایی HTML  برای نمایش را شامل می شود. به کد زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<meta http-equiv=”X-UA-Compatible”
content=”IE=edge”>
<meta name=”description”
content=”description”>
<title>Typewriter Effect</title>
<link rel=”stylesheet” type=”text/css”
media=”screen” href=”styles.css”/>
</head>
<body>
*** STEP 2 HERE
</body>
</html>

۲- محتویات بدنه.
محتویات مرئی متن نمایش داده شده است. مثال ما، این متن را مانند یک عنصر  h1 در نظر می گیرد که در داخل ظرف «typewriter»( ماشین تحریر) محتوا قرار می گیرد. این موقعیت یابی درون ظرف ماشین تحریر ، تعریف حداکثر عرض جریان متن مورد نیاز برای پروژه را ممکن می سازد. از کد زیر استفاده کنید:

<div class=“typewriter”>
<h1>Example text.</h1>
</div>

۳- کار با CSS  را آغاز کنید.
مرحله بعدی، ساخت یک فایل جدید به نام  «style.css» است ، که برای ذخیره سازی سبک بندی و قوانین تصویر متحرک استفاده می شود اولین مرحله، در تعریف قوانین، تعیین نحوه نمایش بدنه اصلی و ظروف سند  HTML  است. نمایش قرار است در تمام صفحه مرور گر ، با عرض و ارتفاع کامل و بدون margin  و  padding  باشد. به کد زیر توجه کنید:

body,html{
display: block;
width: 100%;
height: 100%;
background: #000;
color: #fff;
padding: 0;
margin: 0;
}

۴- المان typing (در حال تایپ)
المان typing ، باعث می شود تا متن در یک خط تایپ شود و قرار نیست که متن یک به خط بعدی بچسبد. به علاوه، مرز سمت راستی به عنوان یک نشانه گر استفاده می شود ، در حالی که افکت های  تصویر متحرک بر روی ظرف تایپ  اعمال می شود و بروز تاثیر بصری را ممکن می سازد. به کد زیر توجه نمایید:

.typewriter h1{
overflow: hidden;
border-right: .2em solid;
white-space: nowrap;
animation:
typeEffect 5s steps(50),
cursorBlink .8s step-end infinite;
}

۵- تصویر متحرک typing
افکت typing  تنها با تغییر عرض  المان استفاده شده ایجاد می شود. این تصویر متحرک ۵۰ key frame  خوانده می شود.( مراحل (۵۰) از مراحل قبلی) افزایش عرض مانند یک ماشین تحریر نشان داده می شود. برای تغییر نمایش به یک تصویر متحرک، می توانید مراحل و زمان بندی قبلی را تنظیم کنید. از کد زیر استفاده نمایید:

@keyframes typeEffect{
from { width: 0 }
to { width: 100% }
}

۶- تصویر متحرک blinking cursor  (نشانه گر چشمک زن)
این تصویر متحرک با خاموش و روش کردن حالت مرئی مرز سمت راستی ایجاد می شود. برای این منظور، تغییر ویژگی»border-color»(مرز- رنگ) از شفاف به رنگ مورد نظر( سبز) لازم است . رنگ شفاف قبل از فریم های تصویر متحرک و تا  زمان این فریم ها تنظیم می شود، رنگ سبز مرئی،  در ۵۰ درصد دوم تصویر متحرک نشان داده می شود. به کد زیر توجه کنید:

@keyframes cursorBlink{
from, to { border-color: transparent }
۵۰% { border-color: green; }}

ظرف گردش متن
از یک ظرف برای ارائه گردش متن این افکت ها استفاده کنید که کنترل عرض و افکت typing  را انجام می دهد.

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text