کد html متن متحرک

در دنیای وب امروز، استفاده از کدهای HTML متن متحرک در صفحات وب جزو مهمترین ترفندها برای جلب توجه کاربران در بنرها و متون تبلیغاتی و همینطور زیباسازی محتوا محسوب میشه. ایجاد حرکت و جذابیت در متن ‌ها از طریق متحرک سازی یا انیمیشن، حس پویایی به کاربران اون صفحه منتقل میکنه و میتونه کمک کنه طراح محتوا در رسیدن به هدفش موفق تر عمل کنه.

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

بنابراین علاوه بر اینکه قراره کدهای HTML متن متحرک رو با کمک CSS و جاوا اسکریپت در اختیار شما بذاریم، یه سری نکات مهم برای استفاده بهینه از این قابلیت هم به شما خواهیم گفت تا همیشه مدنظر داشته باشید و تعادل رو حفظ کنید چون هدف نهایی بهبود تجربه کاربران هست.

با ما همراه باشید…

مزایا و معایب متحرک سازی متن با HTML

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

در ادامه نمونه ای از مزایا و معایب این کار رو بررسی می کنیم :

مزایا:

• جلب توجه بیشتر

به کار بردن متن های متحرک در صفحات وب، قطعا توجه و حواس مخاطب رو به خودش جلب میکنه و این کار چه با هدف انتقال بهتر محتوا و چه تبلیغ و بولد کردن ویژگی یک محصول یا قیمت و … انجام بشه، تاثیر خودش رو خواهد گذاشت.

• پویایی و زیبایی

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

• افزایش توانایی ارتباط

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

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

محدودیت ها:

• افزایش بارگذاری و کاهش سرعت

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

• کاهش کیفیت دسترسی به محتوا توسط کاربر

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

• تداخل با محتواها

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

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

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

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

استفاده از تگ های Blink و ‌marquee در HTML

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

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

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

<marquee behavior="scroll" direction="left">با سبزلرن از آموزش تا استخدام</marquee>

این کد باعث میشه متن مورد نظر از راست به چپ حرکت کنه. مقادیر دیگری مانند up یا down رو هم میتونید استفاده کنید که برای حرکت دادن متن به سمت بالا و پایین استفاده میشن و همینطور  loop که تعداد دفعات تکرار حرکت رو تعیین میکنه.

تگ  <blink>

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

برای استفاده از <blink> می توانید به سادگی متن خود رو درون این تگ قرار بدید

<blink> با سبزلرن در مرز تکنولوژی </blink>

به این ترتیب متن داخل این تگ به صورت چشمک زن نمایش داده میشه.

اما بهتره بدونید که استفاده از  این تگ ها با پیچیدگی و تنوع تکنولوژی های امروز نه گزینه مطلوبی هست و نه منطقی چون از نظر استاندارد و بهینه‌ سازی وب مشکلاتی داره و حتی توسط بعضی از مرورگرها و استانداردهای جدید وب پشتیبانی نمیشه. مسائل رسپانسیو هم بماند!

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

درسته که هدف، آموزش کدهای HTML متن متحرک هست اما احتمالا میدونید که تگ های 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 ثانیه و به صورت پیوسته تکرار بشه.

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

<span class="animated-text">با سبزلرن یاد بگیرید و یاد بدید </span>

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

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

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

برای استفاده از  Anime.js، اول باید اون رو به کدهای صفحه وب یا همون کدهای HTML متن متحرک اضافه کنید. میتونید این کار رو با اضافه کردن لینک به CDN یا دانلود و اضافه کردن فایل های مربوطه انجام بدید.

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

<!DOCTYPE html>
<html>
<head>
  <title>Animation with Anime.js</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</head>
<body>

<h1 id="animated-text">متن متحرک سبزلرن </h1>

<script>
  anime({
    targets: '#animated-text',
    translateX: [-250, 0],
    opacity: [0, 1],
    duration: 1500,
    easing: 'easeOutExpo'
  });
</script>

</body>
</html>

در این مثال، Anime.js این امکان رو فراهم میکنه تا متن رو با استفاده از translateX از موقعیت اولیه (-250 px از سمت راست) به موقعیت مورد نظر (0px، یعنی موقعیت اولیه) حرکت بدیم. همچنین، با استفاده از opacity مقدار شفافیت رو از 0 به 1 تغییر میدیم تا متن با این مشخصات ظاهر شده و حرکت کنه.

کار duration اینه که مشخص میکنه این انیمیشن چه مدت اجرا بشه که در اینجا 1.5 ثانیه درنظر گرفته شده.

easingهم نوع انیمیشن رو مشخص میکنه که دلخواه هست.

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

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

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

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

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

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

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

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

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

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

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

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

جمع بندی

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

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

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

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

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