پلاگین جی کوئری نمایش متن با 3 افکت جذاب ( با پشتیبانی حروف فارسی )

چند مدتی بود که خبری از پلاگین های جی کوئری در سایت نبود . ولی امروز با یک پلاگین بسیار جذاب در خدمت شما هستم . این پلاگین قابلیت نمایش تعدادی آیتم از جمله نوشته و .. را با 3 افکت بسیار زیبا دارد .

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

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

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

و اما آموزش :

برای انجام این کار ابتدا فایل جی کوئری را از سایت Jquery.com دانلود کرده و سپس به سایت خود لینک کرده و آن را فراخوانی کنید ( داخل تگ head ) .

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

<script src="فایل دانلود شده از سایت جی کوئری" type="text/javascript"></script>

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

که به صورت کلی , دو تگ زیر را خواهیم داشت :

<script src="آدرس فایل دانلود شده از سایت جی کوئری" type="text/javascript"></script>

<script src="آدرس فایل دانلود شده مربوط به پلاگین" type="text/javascript"></script>

با انجام کارهای بالا نوبت به فراخوانی و انجام مراحل در html رسیده .

برای این کار شما باید ابتدا یک لیست ul بسازید و به صورت دلخواه یکی از کلاس های slide , fade و یا typing را به آن بدهید و سپس آیتم هایی که میخواهید پشت سر هم به نمایش درآید , در داخل تگ li که فرزند های ul هستند قرار دهید.

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

<ul class="fade">
   	<li>وحید مجیدی</li>
    <li>دانلود پلاگین جی کوئری</li>
    <li>اسکریپت دات کام</li>
</ul>



<ul class="slide">
	   <li>وحید مجیدی</li>
    <li>دانلود پلاگین جی کوئری</li>
    <li>اسکریپت دات کام</li>
</ul>



<ul class="typing">
	   <li>وحید مجیدی</li>
    <li>دانلود پلاگین جی کوئری</li>
    <li>اسکریپت دات کام</li>
</ul>

نکته : سه کلاس بالا , هر کدام به معنی انجام یک افکت می باشند که fade ( حالت محو شونده گی ) , slide ( کشویی ) و  typing ( تایپیستی ) میباشند .

در مرحله آخر میبایست کد فراخوانی این توابع را در html خود قرار دهید . ( بهترین مکان قبل از بسته شدن تگ <body/> می باشد .

<script>
$(document).ready(function() {
    $('.fade').inewsticker({
		speed       : 3000,
		effect      : 'fade',
		dir         : 'rtl',
		font_size   : 13,
		color       : '#000',
		font_family : 'tahoma',
		delay_after : 1000		
	});
	$('.slide').inewsticker({
		speed       : 2500,
		effect      : 'slide',
		dir         : 'rtl',
		font_size   : 13,
		color       : '#000',
		font_family : 'tahoma',
		delay_after : 1000						
	});
	$('.typing').inewsticker({
		speed           : 100,
		effect          : 'typing',
		dir             : 'rtl',
		font_size       : 13,
		color           : '#000',
		font_family     : 'tahoma',
		delay_after : 1000,
 
	});
});	
</script>

توجه بسیار مهم 1 : طبیعتا لازم به فراخوانی هر 3 تابع جی کوئری و هر 3 تگ ul در html نمیباشد و اینجا به صورت کلی بیان شده است . شما میتوانید هر افکتی که دوست دارید برایش ul ایجاد کرده , کلاس مورد نظر را داده و سپس تابع مورد نظر آن را فراخوانی کنید .

نکته بسیار مهم  2 : شما میتوانید سرعت , اندازه فونت , رنگ نوشته و … را با توجه به آموزش زیر راحتی تغییر دهید .

		speed           : 100,   //   سرعت تغییر متن 
		effect          : 'typing',   //   نوع افکت که 3 نوع fade,slide,typing میباشد
		dir             : 'rtl',   //   نوی دایرکشن که rtl یا ltr میباشد
		font_size       : 13,   //   اندازه متن
		color           : '#000',   //   رنگ متن
		font_family     : 'tahoma',  //   نوع فونت
		delay_after : 1000,  //   فاصله بین تغییر آیتم ها

پیش نمایش آماده

دانلود فایل آماده مراحل بالا

پخش اختصاصی

گرداوری : وحید مجیدی