عضویت در سایت

ورود

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

رمز عبور خود را فراموش کرده اید؟ ایمیل خود را وارد کنید

ورود

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

در بین 1170 آموزش و 2024 پرسش به دنبال چه هستید؟

ویندوز
نصب آنلاین ویندوز

ویندوز 7,8,10,11
مشاوره
مشاوره خرید لپ تاپ و کامپیوتر

مشاوره حرفه ای دریافت کن
بلاگ
مقالات آموزشی

1k+
پشتیبانی آنلاین

سخت افزار/نرم افزار

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

سلام

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

typedjs

typedjs

پیش نمایش:

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



آموزش:

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

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

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

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

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

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

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

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

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

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

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

مطلب پیشنهادی:  آموزش اضافه کردن Firebase در اندروید




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

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

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

موفق باشید.


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


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


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


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


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


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


عضويت در سايت


پرسيدن سوال


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

همیشه در تلاش برای یادگیری :) ارتباط با من: 09159352892

دنبال کردن

ارسال نظر

رفتن به بالا

سامانه آموزشی و خدماتی بپرسم

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

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