افکت تایپ متن یا تایپ خودکار متن در jQuery

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

برای اینکه شما هم در پروژه های طراحی خود بتونید از همچین افکت متنی استفاده کنید نیاز به یک کتابخانه مانند Typed.js دارید.

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

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

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

1	<script type="text/javascript" src="typed.js"></script>

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

برای صدا زدن توابع مربوط به کتابخانه Typed.js به منظور ایجاد افکت تایپ خودکار متن نیاز است که از کد زیر در صفحه خود استفاده کنید

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

<script>
    document.addEventListener('DOMContentLoaded', function(){

        Typed.new("#typed", {
            stringsElement: document.getElementById('typed-strings'),
            typeSpeed: 30,
            backDelay: 500,
            loop: false,
            contentType: 'html', // or text
            // defaults to null for infinite loop
            loopCount: null,
            callback: function(){ foo(); },
            resetCallback: function() { newTyped(); }
        });

        var resetElement = document.querySelector('.reset');
        if(resetElement) {
            resetElement.addEventListener('click', function() {
                document.getElementById('typed')._typed.reset();
            });
        }

    });

    function newTyped(){ /* A new typed object */ }

    function foo(){ console.log("Callback"); }

    </script>

document.addEventListener('DOMContentLoaded', function(){

Typed.new("#typed", {

stringsElement: document.getElementById('typed-strings'),

typeSpeed: 30,

backDelay: 500,

loop: false,

contentType: 'html', // or text

// defaults to null for infinite loop

loopCount: null,

callback: function(){ foo(); },

resetCallback: function() { newTyped(); }

});

var resetElement = document.querySelector('.reset');

if(resetElement) {

resetElement.addEventListener('click', function() {

document.getElementById('typed')._typed.reset();

});

}

});

function newTyped(){ /* A new typed object */ }

function foo(){ console.log("Callback"); }

</script>

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

stringsElement : تگ شامل متن ما که باید افکت تایپ خودکار متن را داشته باشد (با سلکتور ID)
typeSpeed : سرعت نوشتار افکت تایپ خودکار متن
backDelay : زمان وقفه برای برگشتن به عقب و نوشتن متن جدید بصورت خودکار
loop : مشخص می کنیم که بعد از متن تمام متن ها, آیا دوباره از اول نوشتن را شروع کند یا خیر (true: بله , false : خیر)
contentType : نوع رشته را مشخص می کند که اگر قصد تحلیل کدهای HTML را دارید می توانید مقدار html را وارد کنید.

بقیه موارد هم مربوط به کنترل رویداد کلیک و توابع بازگشتی (callback) است که مثلا بعد از اتمام متن یک عملیاتی انجام بشه.

حالا باید متن هایی که میخواهیم با افکت تایپ متن نمایش داده شود را مشخص می کنیم، برای اینکار کدها در بین تگ های HTML از قبل تعریف شده قرار میدهیم و یک آی دی (typed-strings) برای دسترسی به آن را مشخص می کنیم که در صورت تغییر باید در بخش آپشن کدهای بالا از قسمت stringsElement تغییر کنند.

<div id="typed-strings">
    <p>سلام <p>
    <p>به نت پارادیس خوش آمدید </p> 
    <p>کاربردی ترین آموزش ها در نت پارادیس</p> 
    <p>بهترین سورس کد ها </p> 
    <p> بروزرسانی همیشگی</p>
    <p>www.netparadis.com</p> 
</p>
    </div>
<span id="typed" style="white-space:pre;"></span>

<p>به نت پارادیس خوش آمدید </p>

<p>کاربردی ترین آموزش ها در نت پارادیس</p>

<p>بهترین سورس کد ها </p>

<p> بروزرسانی همیشگی</p>

<p>www.netparadis.com</p>

</p>

</div>

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

.typed-cursor{
	opacity: 1;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}
@keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-webkit-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-moz-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
.typed-fade-out{
    opacity: 0;
    animation: 0;
    transition: opacity .25s;
}

.typed-cursor{

opacity: 1;

-webkit-animation: blink 0.7s infinite;

-moz-animation: blink 0.7s infinite;

animation: blink 0.7s infinite;

}

@keyframes blink{

0% { opacity:1; }

50% { opacity:0; }

100% { opacity:1; }

}

@-webkit-keyframes blink{

0% { opacity:1; }

50% { opacity:0; }

100% { opacity:1; }

}

@-moz-keyframes blink{

0% { opacity:1; }

50% { opacity:0; }

100% { opacity:1; }

}

.typed-fade-out{

opacity: 0;

animation: 0;

transition: opacity .25s;

}

خروجی افکت تایپ متن یا تایپ خودکار متن در jQuery

برای خواندن داکیومنت راهنمای کامل آپشن های کتابخانه Typed.js به منظور ایجاد افکت تایپ خودکار کافیست که به این لینک مراجعه کنید.

برای تست آنلاین افکت تایپ متن یا تایپ خودکار متن هم می توانید به اینجا بروید

همچنین اگر نتوانستید کامل اسکریپت را اجرا و نتیجه نهایی را ببنید, نگران نباشید چرا که سورس کامل این پروژه از باکس دانلود قابل دریافت است.

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

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

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

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

لغو پاسخ

فاطمه ۳ دی ۱۴۰۰

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

پاسخ

حسن شفیعی ۴ دی ۱۴۰۰

سلام. خوشحالیم که مفید واقع شده.
داخل خود داکیومنت رسمی typed.js ببینید احتمالا آپشن rtl رو داشته باشه

پاسخ

احمدرضا ۲۵ مهر ۱۴۰۰

سلام چطور میتونم height خط تایپ typed-cursorرو بیشتر کنم ؟؟

پاسخ
رضا ۴ مرداد ۱۴۰۰

با سلام!
من یه صفحه نوشت که با زدن کلید های کیبرد یه چیزی رو نشون میده مثلا کدش اینه
document.body.addEventListener(‘keydown’, function (e) {
var keyCode = e.keyCode;
if(keyCode == 50) {
document.getElementById(‘text2’).innerHTML = (‘ > YES’);
}
});

خب این کد باید در اخر body قرار بگیره چون باید ایدی ها و کلاس هارو بخونه حالا تصور کنید وقتی کاربر بر روی کلید ۲ یا @ کلیک میکنه کد میاد و ظاهر میشه اما میخوام اون چیزی که ظاهر میشه به صورت تایپی باشه! خیلی ممنون میشم کمک کنید!

پاسخ

حسن شفیعی ۴ مرداد ۱۴۰۰

سلام.
از این آموزش استفاده کنید :
https://netparadis.com/jquery-typing-effect

پاسخ

رضا ۴ مرداد ۱۴۰۰

با سلام!
من اینجوری کد ها رو ترکیب کردم اما جواب نمیده
document.body.addEventListener(‘keydown’, function (e) {
var keyCode = e.keyCode;
if(keyCode == 49) {
document.getElementById(‘text1’).innerHTML = (“ > GOOD MORRNING ADMIN,”);

document.addEventListener(‘DOMContentLoaded’, function(){

Typed.new(“#typed”, {
stringsElement: document.getElementById(‘typed-strings’),
typeSpeed: 30,
backDelay: 500,
loop: false,
contentType: ‘html’, // or text
// defaults to null for infinite loop
loopCount: null,
callback: function(){ foo(); },
resetCallback: function() { newTyped(); }
});

var resetElement = document.querySelector(‘.reset’);
if(resetElement) {
resetElement.addEventListener(‘click’, function() {
document.getElementById(‘typed’)._typed.reset();
});
}

});

function newTyped(){ /* A new typed object */ }

function foo(){ console.log(“Callback”); }
}
});
خیلی ممنون میشم کمک کنید!

پاسخ
حسن شفیعی ۴ مرداد ۱۴۰۰

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

پاسخ
رضا ۵ مرداد ۱۴۰۰

توی console هیچ خطایی نمیده

پاسخ
حسن شفیعی ۶ مرداد ۱۴۰۰

یکبار بدون ترکیب فقط کدهای مربوط به تایپ رو تست کنید و بعد اگر اوکی بود با کد فعلی ترکیب کنید

پاسخ
رضا ۶ مرداد ۱۴۰۰

هر دو کد به صورت جداگانه کار میکنن اما به صورت ترکیبی نه!

پاسخ

احمدرضا ۱۹ اسفند ۱۳۹۸

سلام اگه بخوام بعد از هر تایپ بره ط بعد و متن بعدی رو بنویسه باید چه کنیم>؟

پاسخ

حسن شفیعی ۱۹ اسفند ۱۳۹۸

سلام.
بین جملاتی که قصد دارید در خط بعدی نوشته شود یک \n قرار بدید.
موفق باشید.

پاسخ

احمدرضا ۱۹ اسفند ۱۳۹۸

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

http://s7.picofile.com/file/8390495868/index_2_.html.html

پاسخ
حسن شفیعی ۱۹ اسفند ۱۳۹۸

سلام. این مورد توسط ما انجام نمیشه باید خودتون انجام بدید و تا حدی که بتونیم راهنمایی می کنیم.
باید به جای اینکه جداگونه داخل تگ های p بزارید باید همه جملات رو داخل یک تگ بزارید و بعد هر کدام که خواستید داخل یک خط باشند \n بزارید

پاسخ
احمدرضا ۱۹ اسفند ۱۳۹۸

ممنون کد درست اینه:

document.addEventListener(‘DOMContentLoaded’, function(){

Typed.new(“#typed”, {
stringsElement: document.getElementById(‘typed-strings’),
typeSpeed: 30,
backDelay: 500,
loop: false,
contentType: ‘html’, // or text
// defaults to null for infinite loop
loopCount: null,
callback: function(){ foo(); },
resetCallback: function() { newTyped(); }
});

پاسخ
احمدرضا ۱۹ اسفند ۱۳۹۸

بجای /n باید
بزاریم

پاسخ

افکت تایپ متن یا تایپ خودکار متن در jQuery

خروجی افکت تایپ متن یا تایپ خودکار متن در jQuery

دانـلود باکــس

آموزش جی کوئری – متوقف کردن انیمیشن جی کوئری

آموزش جی کوئری – افکت انیمیشن jQuery

آموزش جی کوئری – افکت Sliding در jQuery

آموزش جی کوئری – افکت محو شدن در jQuery

لغو پاسخ

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

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه