آموزش ایجاد متن چرخشی با افکت های مختلف در جی کوئری

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

ابتدا کتابخانه جی کوئری را به صورت زیر فراخوانی کنید :

سپس دو فایل CSS و جی کوئری این پلاگین را به صورت زیر به صفحه مورد نظرمون اضافه میکنیم(درون همان تگ

)

بعد از این مراحل مقدمات کار آماده است سپس باید متن مورد نظرمون را درست کنیم و بعد با استفاده از دستورات جی کوئری بر روی متن خودمون افکت را اجرا کنیم بنابرین در داخل تگ body یک متن به صورت زیر مینویسیم (البته شما متن دلخواهتون را بنویسید):

Super Simple, Customizable, Light Weight, Easy Text Rotator with Style

در این کد کلمه هایی که درون تگ span قرار دارند و با کاما از هم جدا شده اند به صورت چرخشی عمل میکنند یعنی با افکت هایی که ما در پایین تعیین میکنیم جایگزین یکدیگر میشوند. خوب در این مرحله میخوایم با دستور های جی کوئری افکت های مورد نظرمون را اعمال کنیم فرم کلی اعمال افکت ها به صورت زیر است.

$(".rotate").textrotator({
 animation: "dissolve",
 separator: "," 
 speed: 2000 // 
});

در کد بالا rotate کلاسی هست که قبلا به تگ span داده بودیم. برای تغییر افکت به جای کلمه dissolve میتوانیم از کلمات fade, flip, flipUp, flipCube, flipCubeUp و spin استفاده کنیم که طرز عمل این افکت ها را در دمو میتوانید مشاهده کنید. در قسمت separator تعیین میکنیم که کلمات داخل span که قبلا نوشتیم با چه کاراکتری از هم جدا شده اند و میتوانیم به جای کاما(که در بالا ما با کاما کلمات را جدا کرده بودیم) از هر کاراکتر دلخواهی استفاده کنیم. کاراکتر هایی مانند (|, &, *) speed هم زمان نمایش هر کلمه را به میلی ثانیه تعیین میکند. فراموش نکنید که این کد ها را درون قرار دهید.