bundles
  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 330 ۳۰ دی ۹۵

ityped

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

  • حجم اون خیلی کم و کمتر از 3 کیلوبایت هست
  • نیاز به هیچ پیش نیازی نداره
  • کار کردن با اون خیلی ساده و آسان هست

همونطور که در دموی بالا دیدید تعدادی جمله و عبارت قرار داده شده و بصورت انیمیشنی و زیبا تایپ میشن. خب برای شروع یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین:

همونطور که مشاهده میکنید فایل reset.css رو در بالا قرار دادیم تا تنظیمات مرورگر رو به حالت اولیه برگردونه. یک تگ style هم در بالا قرار داده شده که کدهای CSS درون اون قرار میگیره. در آخر هم فایل ityped.min.js قرارگرفته و بعد از اون هم یک تگ script گذاشتیم که کدهای CSS رو درونش قرار بدیم.همونطور که در بالا دیدید یک span با id = ityped قرار داده شده. این span همون جایی هست که متون انیمیشنی ما درونش قرار داده میشن. برای اینکه افکت چشمک زن Cursor هم به وجود بیاد، باید کدهای CSS زیر رو اضافه کنیم:

درون بخش Javascript باید کدهای زیر رو قرار بدیم:

ورودی اول همون المنتی هست که قراره متنها درونش نمایش داده بشه. وردوی دوم هم یک شئ یا Object هست که تنظیمات مربوط به تایپ درونش قرار میگیره. ویژگی هایی که میتونین استفاده کنید بصورت زیر هست:

  • strings : یک آرایه هست که همه متنها رو درون خودش قرار میده
  • typeSpeed : سرعت تایپ کردن رو مشخص میکنه. مقدار پیش فرض اون 100 هست
  • backSpeed : سرعت پاک کردن با Backspace رو مشخص میکنه. مقدار پیش فرض اون 50 هست
  • startDelay : مدت زمان قبل از شروع تایپ. مقدار پیش فرض اون 500 هست
  • backDelay : مدت زمان قبل از پاک کردن. مقدار پیش فرض اون 500 هست
  • loop : تکرار شدن یا نشدن جملات رو مشخص میکنه و مقدار پیش فرض اون false هست
  • showCursor : مشخص میکنه که Cursor نمایش داده بشه یا خیر. مقدار پیش فرض اون true هست
  • cursorChar : با استفاده از این ویژگی میتونین کاراکتر مربوط به تایپ کردن رو مشخص کنید و پیش فرض اون | هست
  • onFinished : میتونین کدهایی رو درون اون قرار بدین و زمانی که تایپ کردن تمام شد، این کدها اجرا خواهند شد

کدهایی که ما قرار میدیم بصورت زیر هستند:

خروجی کد بالا درون صفحه دمو نمایش داده شده.

بهمین سادگی تونستیم این افکت زیبا رو به وجود بیاریم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

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

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram