نام این پلاگین typed.js می باشد که هم به صورت جاوا اسکریپت و هم جی کوئری قابل استفاده است .

در ادامه با ما همراه باشید .

و اما آموزش :

در ابتدا شما باید کتابخانه typed رو از اینجا دانلود نمایید و با استفاده از تگ script به وب سایت خود ضمیمه نمایید :

به عنوان مثال فرض بر اینکه فایل typed.js در پوشه js قرار دارد .

<script src="js/typed.js"></script>

حال به تگی که میخواهید متن ها در آن نمایش داده شود , کلاس vms_TypedJs بدهید . به عنوان مثال :

<h1 class="vms_TypedJs"></h1>

و در آخر کد جاوا اسکریپت زیر را در انتهای صفحه ی خود ( قیل از تگ <body/> قرار دهید ) :

<script>
    document.addEventListener("DOMContentLoaded", function(){
        Typed.new(".element", {
            strings: ["Vahid Majidi Sadr", "Web Designer", "Web Developer"],
       	    typeSpeed:30,
            startDelay:500,
            backSpeed:30,
            backDelay:2000
        });
    });
</script>

نکته 1 : شما میتوانید درون متغیر strings در کد بالا , به جای 3 جمله ای که به صورت پیشفرض نوشته شده است , نوشته های دلخواه خود را قرار دهید و یا حتی به آن جمله های بیشتری اضافه کنید .

نکته 2 : شما میتوانید با تغییر عدد 4 متغیر بالا که هر کدام عددی بر حسب میلی ثانیه در آن قرار گرفته است , سرعت تایپ رفت , برگشت و یا حتی تاخیر بین این دو حالت را عوض نمایید .

توجه : برای استفاده از دیگر تنظیمات این پلاگین به وب سایت مرجع مراجعه نمایید .

پخش اختصاصی

آموزش و گرداوری : وحید مجیدی

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

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

برای این کار کافیست ابتدا کد زیر را در فایل script خود قرار دهید :

vmsString = 'Vahid Majidi Sadr | www.اسکریپت.com';
vmsVar = 0;

function vmsFunc(){	
document.getElementById("vmsTyping").innerHTML=vmsString.substr(0,vmsVar);
vmsVar++;
	if(vmsVar<=vmsString.length+4){
		setTimeout("vmsFunc()",200);	
	}else{
		document.getElementById("vmsTyping").innerHTML="";
		vmsVar=0;
		setTimeout("vmsFunc()",200);	
	}
}
window.onload=vmsFunc;

حال در html , در هر مکانی که دوست دارید این نوشته نمایش داده شود , تگی دلخواه ولی با آی دی vmsTyping باز کنید و در درون آن چیزی ننویسید .

به عنوان مثال :

<p id="vmsTyping"></p>

توجه : شما عزیزان به راحتی میتوانید با تغییر عدد 200 در بالا , سرعت حرکت را بیشتر و یا کمتر نمایید .

دموی افکت

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی