در این مطلب قصد دارم روش استفاده از یک پلاگین جی کوئری کم حجم و سبک و فوق العاده ساده را که به شما امکان اضافه کردن یک متن چرخشی با افکت هایی جذاب را میدهد آموزش بدهم.
برای مشاهده دموی این آموزش و یا دانلود کدها به قسمت پایین این مطلب مراجعه کنید.
برای استفاده از این پلاگین در وبسایت خودتون باید درون تگ <head> ابتدا کتابخانه جی کوئری را به صورت زیر فراخوانی کنید :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
سپس دو فایل CSS و جی کوئری این پلاگین را به صورت زیر به صفحه مورد نظرمون اضافه میکنیم(درون همان تگ <head> )
<script type="text/javascript" src="jquery.simple-text-rotator.js"></script> <link rel="stylesheet" type="text/css" href="simpletextrotator.css" />
بعد از این مراحل مقدمات کار آماده است سپس باید متن مورد نظرمون را درست کنیم و بعد با استفاده از دستورات جی کوئری بر روی متن خودمون افکت را اجرا کنیم بنابرین در داخل تگ body یک متن به صورت زیر مینویسیم (البته شما متن دلخواهتون را بنویسید):
Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style
در این کد کلمه هایی که درون تگ span قرار دارند و با کاما از هم جدا شده اند به صورت چرخشی عمل میکنند یعنی با افکت هایی که ما در پایین تعیین میکنیم جایگزین یکدیگر میشوند.
خوب در این مرحله میخوایم با دستور های جی کوئری افکت های مورد نظرمون را اعمال کنیم فرم کلی اعمال افکت ها به صورت زیر است.
$(".rotate").textrotator({
animation: "dissolve",
separator: ","
speed: 2000 //
});
در کد بالا rotate کلاسی هست که قبلا به تگ span داده بودیم.
برای تغییر افکت به جای کلمه dissolve میتوانیم از کلمات fade, flip, flipUp, flipCube, flipCubeUp و spin استفاده کنیم که طرز عمل این افکت ها را در دمو میتوانید مشاهده کنید.
در قسمت separator تعیین میکنیم که کلمات داخل span که قبلا نوشتیم با چه کاراکتری از هم جدا شده اند و میتوانیم به جای کاما(که در بالا ما با کاما کلمات را جدا کرده بودیم) از هر کاراکتر دلخواهی استفاده کنیم. کاراکتر هایی مانند (|, &, *)
speed هم زمان نمایش هر کلمه را به میلی ثانیه تعیین میکند.
فراموش نکنید که این کد ها را درون <script></script> قرار دهید.
این پست را هم بخونید : انیمیشن متن در صفحه با CSS و جیکوئری
5 دیدگاه بر “آموزش ایجاد متن چرخشی با افکت های مختلف در جی کوئری”
دیدگاه‌ها بسته شده‌اند.
سلام
آقا اینو چطور توی وردپرس می شه به کار برد منظور توی یه برگه؟ این برگه تو صفحه اول سایت فراخوانی می شه توی قالب می خوایم که این افکت رو به کار ببریم
می شه راهنمایی کنین
متشکرم
من هرکاری میکنم نمیتونم اجراش کنم
من تو این کار مبتدی هستم
میشه از اول تا آخر کامل توضیح بدین
سلام
منظورتون را از اینکه از اول تا آخر توضیح بدیم دقیق نمیفهمم.
به نظرم آموزش نسبتا کامل است.
برای درک این آموزش شما باید حداقل css و html را بلد باشین .
شما مرحله به مرحه جلو برو و هرجا گیر کردین بگین تا کمک کنم.
موفق باشید.
سلام
آقا رضا شما باید کدها را به فایل page.php اضافه کنید.
طبق آموزش جلو بروید و کدها را درون اون فایل قرار دهید.
موفق باشید.
بسیار عالی مرسی از پست زیباتون