آموزش افکت تایپ کردن انیمیشنی در جاوا اسکریپت!

تیم تحریریه کلیک اول | سه شنبه , ۲۶ تیر ۱۳۹۷ | مدت زمان مطالعه: 12 دقیقه

در این مقاله می خوانید:

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

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

هرچه تعداد افراد بیشتری از سایت شما بازدید کنند، باعث بهبود رتبه الکسا سایت شده و می تواند در سئو و بهینه سازی سایت نیز تاثیرگذار باشد. یکی از افکت هایی که می تواند باعث جلب توجه بازدیدکنندگان سایت قرار گیرد، تایپ کردن انیمیشنی متن می باشد.

تایپ انیمیشنی بدین صورت می باشد که بخشی از متن سایت (به شکلی که شما تعیین می کنید)، مدام در حال تغییر و بروز رسانی باشد. در این حالت، کاربر Cursor چشمک زن تایپ را در کنار متن مشاهده کرده و اینگونه به نظر می رسد که یک اپراتور در نرم افزاری مانند Word در حال تایپ کردن و پاک کردن متن می باشد.

نحوه استفاده از کتابخانه تایپ کردن انیمیشنی

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

پس از دانلود، یک فایل کامل با پسوند Zip در اختیار شما قرار می گیرد. پس از اکسترکت نمودن فایل، یک پوشه به نام typed.js-master در اختیار خواهید داشت. این فایل حاوی دو پوشه مهم CSS و JS به همراه یک فایل HTML به نام index.html می باشد. با بازنمودن فایل HTML در مرورگر، مشاهده می کنید که متن انیمیشنی برای شما به نمایش در می آید. همچنین در پایین هر قسمت، کدهایی برای اعمال تنظیمات مربوطه را مشاهده می کنید.

با باز نمودن این فایل در یک IDE نظیر Sublime Text، می توانید به کدهای آن دسترسی داشته باشید. این فایل برای نمایش زیباتر صفحه، حاوی تعدادی لینک CSS و JS اضافه تر می باشد که نیازی نیست شما در پروژه خود از آن ها استفاده نمایید. برای اعمال صحیح کدها، تنها کافیست دو فایل بسیار مهم typed.js و demos.js را در سایت خود کپی نموده و آدرس آن ها را به شکل زیر، در پایین صفحه سایت و قبل از تگ بسته Body قرار دهید:

<script src="lib/typed.js" type="text/javascript"></script>
  <script src="assets/demos.js"></script>

1 2	<script src="lib/typed.js" type="text/javascript"></script> <script src="assets/demos.js"></script>

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

Basic Demo

<div class="type-wrap">
    <div id="typed-strings">
      <span>Typed.js^10 is a <strong>JavaScript</strong> library.</span>
      <p>It <em>types</em> out sentences.</p>
      <p>And then deletes them.</p>
      <p>Try it out!</p>
    </div>
    <span id="typed" style="white-space:pre;"></span>
  </div>

<span>Typed.js^10 is a <strong>JavaScript</strong> library.</span>

<p>It <em>types</em> out sentences.</p>

<p>And then deletes them.</p>

</div>

</div>

برای حالت پیش فرض تنها نیاز به کدهای HTML دارید و در درون این کدها می توانید محتوای موردنظر خود را قرار دهید.

اما برای حالت های بعد نظیر Fade Out، علاوه بر کدهای HTML زیر، بایستی قطعه کدجاوااسکریپ موجود در زیر باکس را نیز به شکل زیر از داخل مرورگر کپی نموده و پس از فایل demos.js قرار دهید. مطابق زیر:

Fade Out

<div class="type-wrap">
    <span id="typed2" style="white-space:pre;"></span>
  </div>

</div>

<script src="lib/typed.js" type="text/javascript"></script>
<script src="assets/demos.js"></script>
<script type="text/javascript">
  var typed2 = new Typed('#typed2', {
    strings: ['Some <i>strings</i> with', 'Some <strong>afdgd</strong>', 'Chars &times; &copy;'],
    typeSpeed: 0,
    backSpeed: 0,
    fadeOut: true,
    loop: true
  });
</script>

var typed2 = new Typed('#typed2', {

strings: ['Some <i>strings</i> with', 'Some <strong>afdgd</strong>', 'Chars × ©'],

typeSpeed: 0,

backSpeed: 0,

fadeOut: true,

loop: true

});

</script>

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

دانلود فایل

به صفحه تلگرام کلیک اول بپیوندید.

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

تیم تحریریه کلیک اول

نویسنده در بلاگ کلیک اول

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