ثبت نام کنید

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ آدرس ایمیل خود را وارد کنید، یک ایمیل حاوی لینک بازیابی رمز عبور برای شما ارسال می شود.

پرسیدن سوال

برای پرسیدن سوال، باید وارد حساب کاربری خود در سایت شوید.
در بین 708 آموزش و 1298 پرسش به دنبال چه هستید؟

در بپرسم کلیه مطالب آموزشی رایگان است، کافیست فقط آن چیزی را که میخواهید دنبالش بگردید


آموزش استفاد از کتابخونه Typedjs(افکت تایپ متن)

سلام

احتمالا در بعضی از صفحات وب دیدید که متنی به صورت خودکار تایپ و سپس پاک میشود و از دوباره یک متن دیگه شروع به تایپ شدن میکند و ادامه پیدا میکند( که به اصطلاح بهش افکت تایپ متن گفته میشود)، برای اینکه شما هم در طراحی های خود بتونید از همچین افکتی استفاده کنید نیاز به کتابخونه Typed.js دارد، در ادامه همراه بپرسم باشید تا کار با این کتابخانه را یاد بگیرید.

typedjs

typedjs

پیش نمایش:

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



آموزش:

  • ابتدا باید کتابخونه Typed.js را دانلود و در صفحه وب فراخوانی کنید(برای دانلود، کلیک کنید).

کد بالا را درون تگ <head> </head> قرار داده و مسیر فایل را وارد کنید.

به چند روش می توانیم از این کتابخونه استفاده کنیم، که در ادامه به ساده ترین و اصولی ترین(SEO Friendly) می پردازیم.

  • تگ اسکریپت زیر را نیز به صفحه وب خود اضافه کنید(تا کتابخونه قابل استفاده باشد)

  • سپس نوبت می رسد به متن هایی که میخواهیم نمایش داده شود، برای اینکار کدها در بین تگ های HTML از قبل تعریف شده قرار میدهیم.
حتما بخوانید:  آموزش فارسی word - قسمت اول(مقدمه،ایجاد و باز کردن سند)

به تگ div اولی آیدی typed-strings داده شده است، این آیدی در کدهای جاوا اسکریپت تعریف شده است، در واقع اگر میخواهید از پلاگین استفاده کنید می بایست یک div با این آیدی ایجاد کنید.

کار به اتمام رسید، اگر خروجی را مشاهده کنید می بینید که نشانگر ماوس ثابت است(چشمک نمیزند موقع تایپ متن)، برای اینکه نشانگر ماوس هنگام تایپ متن چشمک بزند از کد css زیر استفاده می کنیم:

ممکن است کمی گیج شده باشید!

حتما بخوانید:  آموزش ارتباط با سرور آنلاین در B4A - قسمت اول(مقدمه)

در نهایت صفحه HTML ما که در آن از افکت تایپ متنی استفاده کردیم به این صورت است:




برای مشاهده کتابخونه Typed.js و همچنین آشنایی بیشتر با این کتابخونه و تنظیمات آن، کلیک کنید.

حتما بخوانید:  آموزش نصب و استفاده از پلاگین topaz clean - فتوشاپ

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

در پایان نیز میتوانید سورس مربوط به آموزش را دانلود کنید.

موفق باشید.


دانلود: سورس آموزش + کتابخانه


پيش نمايش: کليک کنيد


حجم: 30 کیلوبایت


رمز فايل فشرده: www.beporsam.ir


طبق آموزش موجود در پست بالا پیش برید


اگر در رابطه با مطلب بالا سوالي يا مشکلي داريد ميتوانيد سوال خود را در سايت بپرسيد، کاربران سايت پاسخگوي سوالات شما خواهند بود.


عضويت در سايت


پرسيدن سوال


درباره احمد آخوندیمدیر

در صورتی که از بپرسم راضی بودید؛ میتوانید حمایت مالی کنید

دنبال کردن من

پاسخ دهید