افکت تایپ خودکار متن یکی از راههای جلب توجه کاربر است. این می تواند هنگام استفاده از یک برنامه به کاربران سرنخ هایی بدهد و همچنین راهی برای انتقال یک پیام مهم است. یکی بسازیم!
1. ساختار HTML
همانطور که اغلب در این نوع آموزش، ما رابط کاربری خود را با استفاده از اجزای Bootstrap ایجاد می کنیم. ساختار HTML حاوی یک نوار جستجو در مرکز صفحه خواهد بود و به شکل زیر خواهد بود:
1 |
|
2 |
class="container d-flex justify-content-center align-items-center height" |
3 |
>
|
4 |
|
5 |
|
6 |
|
7 |
class="input-group-text primary" id="search-icon">
|
8 |
class="fa fa-search" aria-hidden="true">
|
9 |
|
10 |
|
11 |
id="text" type="text" class="form-control form-rounded " />
|
12 |
|
13 |
|
14 |
|
به طور خلاصه: در HTML خود، عنصر کانتینری را داریم که از Flexbox برای مرکز دادن محتوا به صورت افقی و عمودی استفاده می کند.
در عنصر کانتینر، یک کانتینر ردیفی داریم که در آن قرار دارد InputGroup.
این InputGroup حاوی یک متن ورودی با نماد جستجو است که به آن اضافه شده است.
2. CSS سفارشی
بیایید با افزودن چند سبک سفارشی، چیزها را تغییر دهیم. ابتدا یک فونت سفارشی گوگل را وارد کنید و ارتفاع بدنه و html را روی 100% تنظیم کنید تا از ارتفاع نمای کامل اطمینان حاصل کنید. اطمینان حاصل کنید که ظرف 100٪ بدن را می گیرد.
1 |
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"); |
2 |
|
3 |
body, |
4 |
html { |
5 |
height: 100%; |
6 |
font-family: "DM Mono", monospace; |
7 |
background-color: aliceblue; |
8 |
}
|
9 |
.height { |
10 |
height: 100%; |
11 |
}
|
سبک های زیر را در ورودی متن و گروه ورودی اعمال کنید:
1 |
#text { |
2 |
font-size: 1.52rem; |
3 |
border-left: none; |
4 |
border-radius: 0 30px 30px 0; |
5 |
}
|
6 |
.input-group-text { |
7 |
background-color: #fff; |
8 |
border-radius: 30px 0 0 30px; |
9 |
}
|
در آخر استایل های زیر را به آیکون اضافه کنید.
1 |
i { |
2 |
font-size: 1.3rem; |
3 |
margin-left: 1rem; |
4 |
}
|
3. عملکرد جاوا اسکریپت
با توجه به ساختار و استایل ما، بیایید به سمت رفتار حرکت کنیم. با دریافت عنصر ورودی متن شروع کنید.
1 |
const textElement = document.getElementById("text"); |
بعد، یک آرایه از کلماتی که باید تایپ شوند ایجاد کنید.
1 |
const textArray = ( |
2 |
"Software Engineer", |
3 |
"Data Scientist", |
4 |
"UX Designer", |
5 |
"Product Manager", |
6 |
"Project Manager", |
7 |
"DevOps Engineer", |
8 |
"Data Engineer", |
9 |
"Business Analyst", |
10 |
"Systems Analyst", |
11 |
"Web Developer", |
12 |
"App Developer", |
13 |
"Network Engineer", |
14 |
"Frontend Developer", |
15 |
"Backend Developer", |
16 |
"Full Stack", |
17 |
"Scrum Master", |
18 |
"Technical Support", |
19 |
"Database Admin", |
20 |
);
|
متغیرهای زیر را تعریف کنید:
1 |
let pipe = true; |
2 |
let index = 0; |
3 |
let speed = 200; |
4 |
let isTyping = true; |
5 |
let textIndex = 0; |
-
pipe: این متغیر قابلیت مشاهده نماد لوله ( | ) را برای نشان دادن مکان نما چشمک زن کنترل می کند -
index =0: برای ردیابی موقعیت فعلی کاراکتر در حال تایپ استفاده می شود. -
speed =200: سرعت تایپ را بر حسب میلی ثانیه نشان می دهد -
isTyping = true;: برای تعیین اینکه آیا متن در حال تایپ یا حذف است استفاده می شود -
textIndex: نشان دهنده مورد ازtextArrayدر حال تایپ شدن
سپس یک تابع به نام ایجاد کنید typeText().
1 |
function typeText() { |
2 |
|
3 |
}
|
در داخل تابع، با گرفتن اولین مورد از تابع شروع می کنیم textArray و اضافه کردن لوله (|) کاراکتر در انتهای متن.
1 |
function typeText() { |
2 |
let text = textArray(textIndex); |
3 |
if (pipe) { |
4 |
text += "|"; |
5 |
}
|
6 |
}
|
برای شبیهسازی افکت تایپ، یک بلوک تایپ ایجاد میکنیم که آیا را بررسی میکند isTyping درست تنظیم شده است.
1 |
function typeText() { |
2 |
let text = textArray(textIndex); |
3 |
if (pipe) { |
4 |
text += "|"; |
5 |
}
|
6 |
|
7 |
if (isTyping) { |
8 |
if (index < text.length) { |
9 |
textElement.value += text(index); |
10 |
index++; |
11 |
} else { |
12 |
isTyping = false; |
13 |
}
|
14 |
}
|
15 |
}
|
در داخل این بلوک، یک دستور if داخلی برای بررسی if ایجاد می کنیم index کمتر از طول متن است. اگر این شرط درست باشد، به این معنی است که هنوز کاراکترهایی در رشته متن وجود دارند که تایپ نشده اند.
اگر هنوز کاراکترهایی در رشته متن وجود دارد، کاراکتر را در شاخص فعلی به مقدار عنصر متن اضافه می کنیم. پس از اضافه کردن کاراکتر، شاخص را با استفاده از آن افزایش می دهیم index++ برای اطمینان از اینکه کاراکتر بعدی در رشته نیز به مقدار عنصر متن اضافه شده است.
در عبارت else حلقه داخلی، تنظیم می کنیم isTyping به false برای توقف تایپ
بعد از حلقه، a را راه اندازی می کنیم setTimeout تابع برای اجرای بازگشتی typeText() تابع، که به طور مداوم کاراکترها را به مقدار عنصر متنی هر 200 میلی ثانیه اضافه می کند تا زمانی که همه کاراکترهای رشته متن اضافه شوند.
این typeText() تابع اکنون به شکل زیر است:
1 |
function typeText() { |
2 |
let text = textArray(textIndex); |
3 |
|
4 |
|
5 |
if (pipe) { |
6 |
text += "|"; |
7 |
}
|
8 |
if (isTyping) { |
9 |
if (index < text.length) { |
10 |
textElement.value += text(index); |
11 |
index++; |
12 |
} else { |
13 |
isTyping = false; |
14 |
}
|
15 |
}
|
16 |
setTimeout(typeText, 100); |
17 |
}
|
18 |
|
19 |
typeText(); |
در حالت حذف، وقتی isTyping اکنون تنظیم شده است false، یک دستور if داخلی ایجاد می کنیم که بررسی می کند که شاخص بزرگتر از 0 باشد.
اگر شرط درست باشد، شاخص را کاهش می دهیم و از آن استفاده می کنیم slice() روش حذف آخرین کاراکتر رشته
در عبارت else درونی، یعنی if index < 0، یعنی تمام کاراکترهای رشته حذف شده اند. تنظیم خواهیم کرد isTyping به درستی و اختصاص دادن textIndex به مورد بعدی در textArray.
تابع را به صورت زیر به روز کنید:
1 |
function typeText() { |
2 |
let text = textArray(textIndex); |
3 |
if (pipe) { |
4 |
text += "|"; |
5 |
}
|
6 |
|
7 |
if (isTyping) { |
8 |
if (index < text.length) { |
9 |
textElement.value += text(index); |
10 |
index++; |
11 |
} else { |
12 |
isTyping = false; |
13 |
}
|
14 |
}
|
15 |
|
16 |
|
17 |
setTimeout(typeText, speed); |
18 |
}
|
عملکرد حذف به طور مکرر پس از هر 200 ثانیه اجرا می شود، همانطور که توسط متغیر سرعت تعریف شده است.
و در اینجا یک یادآوری از نسخه ی نمایشی است!
نتیجه گیری
در این آموزش، ما یاد گرفتیم که چگونه از جاوا اسکریپت Vanilla برای ساخت یک افکت تایپ خودکار متن استفاده کنیم که در میان آرایه ای از کلمات می چرخد. امیدواریم این آموزش به عنوان پایه ای برای ساخت پروژه های پیشرفته تر باشد!
منبع: https://webdesign.tutsplus.com/how-to-create-an-auto-text-typing-effect-with-vanilla-javascript–cms-108795t