سلام همکار توسعه،
آیا تا به حال به این فکر کرده اید که چه کاری باید انجام دهید تا وب سایت یا نمونه کار خود را واکنش گرا نگه دارید و از 90٪ سایت های “borrring” آن متفاوت باشید؟
سودمندی یک سایت واکنش گرا مورد تاکید قرار نمی گیرد زیرا خوانندگان یا مشتریان بالقوه شما را به صفحه شما می چسباند.
چگونه سایت خود را ریسپانسیو کنم؟
روش‌های زیادی برای واکنش‌گرا کردن سایت‌های ما وجود دارد و آموزش‌های زیادی در وب پراکنده شده است، جلوه تایپ یکی از بهترین راه‌ها است و ما فقط در مورد آن صحبت می‌کنیم، بالاخره به این دلیل است که شما اینجا هستید؟
Html
ابتدا اجازه دهید نگاهی به html بیاندازیم
<div class="text-content">
<h1>Medium is gold</h1>
</div>
من یک کانتینر div با نام “متن-محتوا” ایجاد کردم و h1 را فرزند کردم.
بیایید به CSS برویم
CSS
body{
display:flex;
justify-content:center;
background-color:#f1f1f1;
}
مفهوم کلیدی پشت این کد CSS استفاده از ویژگی flex برای تراز کردن کد به صورت افقی است که برای عملکرد صحیح کد بسیار مهم است. انتخابگر .text-content h1 تگ h1 را در داخل div با کلاس “text-content” هدف قرار می دهد.
.text-content h1 {
color: #fff;
font-family: monospace;
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
overflow hidden تضمین می کند که بقیه کد ما تا زمانی که انیمیشن به پایان نرسد فاش نمی شود.
ویژگی border-right ایده یک مکان نما را می دهد، اما حتی ما هر دو می دانیم که هیچ کدام وجود ندارد، lol.
whitespace nowrap محتوای ما را در یک خط نگه می‌دارد حاشیه: خودکار با افزایش تایپ، جلوه اسکرول را به ما می دهد
در نهایت، انیمیشن ما به ترتیب ایجاد می شود (نام، مدت زمان، جهت و تکرار)
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}
در نهایت، ویژگی انیمیشن دو فریم کلیدی را تنظیم می کند: تایپ و چشمک زدن. فریم کلیدی تایپ، عرض تگ h1 را از 0% تا 100% متحرک می کند که به نظر می رسد متن در حال تایپ شدن است. فریم کلیدی blink-caret رنگ حاشیه تگ h1 را متحرک می کند و باعث می شود مانند مکان نما چشمک بزند.
به طور خلاصه، افکت تایپ یک روش ساده اما موثر برای متمایز کردن وب سایت یا نمونه کار شما از بقیه است.
از اینکه ادامه دادید متشکرم!، اگر در انجام این کار مشکل دارید یا پیشنهاداتی دارید، لطفاً در بخش نظرات به من اطلاع دهید. Gracias amigo
