میتونید از ویژگی‌ هایی مثل behavior و direction استفاده کنید.

به عنوان مثال:

با سبزلرن از آموزش تا استخدام

تگ  

تگ

یکی از تگ های قدیمی HTML هست که برای ایجاد متن چشمک‌ زن در صفحات وب استفاده میشه. این تگ معمولا برای جلب توجه کاربران یا تاکید روی بخشی از متن به کار میره.

برای استفاده از

می توانید به سادگی متن خود رو درون این تگ قرار بدید

 با سبزلرن در مرز تکنولوژی 

استفاده از CSS با keyframes

هست اما احتمالا میدونید که تگ های HTML به طور مستقیم قادر به ایجاد انیمیشن برای تولید متن متحرک نیستن اما میتونید با استفاده از ترکیب تگ های HTML و CSS انیمیشن های متنی زیبا و جذابی ایجاد کنید. ترکیب این دو تکنولوژی، امکانات بیشتری رو برای ایجاد حرکت و تغییرات در متن در اختیار شما قرار میده.

یکی از روش های ایجاد انیمیشن متنی با  CSS، استفاده از تکنیک keyframes  برای تعریف حالت های مختلف متن در طول زمان هست. با استفاده از keyframes در CSS، میتونید حرکت‌های متنی پیچیده ‌تر و متنوع تری رو ایجاد کنید. مثل حرکت از یک مکان به مکان دیگه یا تغییرات در اندازه و رنگ متن.

برای مثال، اگر بخوایم متنی رو به وسیله تغییرات پیوسته از لحاظ اندازه و رنگ، متحرک کنیم، با کد زیر قابل انجام خواهد بود:

@keyframes changeText {
  0% { font-size: 16px; color: black; }
  50% { font-size: 24px; color: blue; }
  100% { font-size: 16px; color: black; }
}

.animated-text {
  animation: changeText 3s ease-in-out infinite;
}

• این کد CSS یک انیمیشن تعریف میکنه که متن رو از اندازه 16 پیکسل و رنگ مشکی به اندازه 24 پیکسل و رنگ آبی تغییر میده و بعد به حالت اولیه برمیگرده. در این مثال تعیین کردیم که انیمیشن به مدت 3 ثانیه و به صورت پیوسته تکرار بشه.

، از کلاسی که ایجاد شد در کنار متن استفاده کنید تا خروجی رو ببینید :

با سبزلرن یاد بگیرید و یاد بدید 

• این کد باعث میشه انیمیشنی که در بالا توضیح دادیم روی متن "با سبزلرن یاد بگیرید و یاد بدید" اعمال بشه.

استفاده از جاوا اسکریپت (کتابخانه anime.js)

اضافه کنید. میتونید این کار رو با اضافه کردن لینک به CDN یا دانلود و اضافه کردن فایل های مربوطه انجام بدید.

بعد از اون به راحتی با استفاده از Anime.js  میتونید انیمیشن های مختلفی روی متن خودتون پیاده سازی که بی نهایت تنوع داره. به عنوان یک مثال ساده، برای ایجاد یک حرکت از راست به چپ برای متن، این کد رو میتونید استفاده کنید:

  






متن متحرک سبزلرن 

نکات مهم در متحرک سازی متن

رو بهینه تر کرده و از بروز مشکل در نتیجه استفاده از اونها، پیش گیری کنه. در ادامه این نکات رو به صورت خلاصه بررسی میکنیم.

• استفاده از انیمیشن های ساده

استفاده از افکت ها و انیمیشن های ساده، کمترین بار رو بر روی پردازنده و مرورگر تحمیل میکنه. انتخاب حرکت های ساده مثل تغییرات کوچیک در مکان یا اندازه و رنگ متن میتونه برای رسیدن به هدف اصلی که جلب توجه یا انتقال بهتر پیام هست کافی باشه و سرعت لود صفحه رو در بهترین حالت حفظ کنه. مگر اینکه فضای وب سایت شما ایجاب کنه از انیمیشن های بیشتر و پیچیده تر استفاده کنید.

• کاهش تعداد و مدت زمان انیمیشن

فاکتور بعدی، تعداد و زمان اجرای انیمیشن هاست. یعنی حتی با فرض ساده بودن انیمیشن متحرک سازی متن، اگر تعداد اونها یا دفعات تکرار و اجرا زیاد باشه، باز هم مشکل قبلی پابرجا خواهد بود. پس سعی کنید فقط در مواقع نیاز و به تعداد کافی اینکارو انجام بدید.

• استفاده از تکنیک های Pre-Loading

استفاده از تکنیک‌ هایی مثل  Lazy Loading برای بارگذاری انیمیشن ها و حتی تصاویر در لحظه ای که نیاز به نمایش اونها وجود داره میتونه کمک کننده باشد و بدون ایجاد حس معطلی در کاربر، فرصت کافی برای لود شدن انیمیشن ها فراهم باشه. این کار باعث کاهش زمان بارگذاری اولیه صفحه میشه و تا حدی بار منفی انیمیشن های استفاده شده روی لود صفحه رو خنثی میکنه.

• بهبود کدهای JavaScript و CSS

بهینه‌سازی کدهای JavaScript و CSS  و به طور کلی

به وسیله حذف کدهای غیرضروری، کاهش حجم فایل ها و بهبود کارایی انیمیشن ها می تونه تاثیر مثبتی داشته باشه و از بروز مشکلاتی که اشاره شد پیشگیری کنه.

• تست و بهینه‌سازی مداوم:

و نکته آخر، تست و بررسی مداوم عملکرد انیمیشن ها و انجام اصلاحات لازم برای بهبود عملکرد اونهاست که معمولا با ارزیابی داده های کاربران مثل ماندگاری در صفحه و یا ارزیابی صفحات از طریق ابزارهای فنی موجود، انجام میشه.

جمع بندی

در این مقاله سعی کردیم

رو بررسی کرده و ابزارهایی که میتونیم با کمک اونها متن متحرک تولید بشه رو معرفی کنیم. مهمتر از روش های اجرا، نکات پیاده سازی بودن که تا حد امکان و به صورت خلاصه توضیح داده شد تا در اینگونه مواقع حواستون باشه با این کار به صفحه وب از لحاظ سرعت و نظم آسیبی وارد نشه.

با توجه به مزیت ها، محدودیت ها و نکاتی که اشاره شد، شما به راحتی میتونید نسبت به شرایط و هدف اون صفحه وب، تصمیم بگیرید از چه ابزار یا روشی برای تولید متن متحرک استفاده کنید.

اگه دوست دارید موضوعاتی شبیه این رو به صورت خیلی مفصل تر و جامع تر یاد بگیرید یه خبر خوب براتون داریم. خوبه بدونید در کنار منابع آموزشی بین المللی مثل w3school به عنوان یک رفرنس خارجی، سبزلرن به عنوان یک مرجع آموزشی باسابقه و متخصص برنامه نویسی در ایران، برای علاقه مندان به توسعه وب و به خصوص فرانت اند، خبرهای فوق العاده ای مثل رایگان شدن

رو داره که بهترین و ناب ترین فرصت برای ورود به دنیای پر رمز و راز وب هست.

اگر تا الان شروع نکردید یا فکر می کنید به اندازه کافی مسلط نیستید، پیشنهاد می کنیم مثل هزاران دانشجوی قبلی تصمیم قاطعی بگیرید و اصلا این دوره های رایگان رو از دست ندید تا تفاوت و تمایز سبک آموزش سبزلرن رو خیلی خوب متوجه بشید .

از اینکه تا انتهای این مقاله با دقت و حوصله همراه ما بودید متشکریم.