سلام به همگی،
امروز قصد دارم شما رو با اسکریپت جی کوئری کارآمد و متفاوتی آشنا کنم که توسط اون میتونید در تصاویر وبسایتتون افکت های جذاب و گوناگونی رو ایجاد کنید.
این اسکریپت، picanim نام داره که شامل دو فایل اصلی Javascript و css.
پیش از هر چیز باید این دو فایل رو دانلود و سپس در قالب فراخوانیشون کنید.
نمونه فراخوانی (در html5):
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.picanim.min.js"></script> <link href="<?php echo get_template_directory_uri(); ?>/css/picanim.css" rel="stylesheet">
پس از فراخوانی اسکریپت، نوبت به استفاده از فایل ها در قالب میرسه. برای این کار باید از دستور .picanim() استفاده کنیم.
نحوه استفاده از این دستور رو با یک نمونه مثال میزنم: (کدهای زیر رو داخل تگ script در بخش body یا head پوسته به کار ببرید.)
* نکته: در این آموزش ما قصد داریم که نحوه استفاده ی پویا از اسکریپت رو بهتون آموزش بدیم. در صورت تمایل میتونید از اسکریپت به صورت استاتیک هم استفاده کنید.
$(document).ready(function(){ $('.full-post-content img').picanim({initEf:'grayscale',hoverEf:'foldLeft'}); });
توضیحات:
در نمونه بالا، ابتدا کلاس full-post-content رو که سلکتور اصلی تک نوشته های من رو تشکیل میده تعریف کردم و سپس تگ img رو با یک فاصله در مقابلش قرار دادم تا اشاره کنم که دستور picanim تنها برای تصاویر قابل استفاده است.
* نکته: فراموش نکنید که نام سلکتور کلاس رو حتما با قالب خودتون ست کنید.
در مرحله بعد نوبت به استفاده از دستور .picanim میرسه. اما همونطور که مشاهده میکنید از این دستور به شکل خالی استفاده نکردم و داخل پراتنز دستورات دیگری رو هم قرار دادم. این دستورات در واقع افکت های اسکریپت رو تشکیل میدن.
دستور initEF افکت اولیه تصویر رو تعریف میکنه که دارای سه گزینه به شرح زیر:
- transparent – شفاف
- grayscale – سیاه سفید
- blur – مات
دستور hoverEF برای زمانیه که موس بر روی تصویر قرار میگیره و یک حالت انیمیشنی رو در اون ایجاد میکنه . نمونه های قابل استفاده در این بخش عبارتند از:
- fadein
- sliceDownLeft
- sliceDownRight
- sliceUpLeft
- sliceUpRight
- foldLeft
- foldRight
- boxRandom
- boxDiagional
در آخر چند مثال از افکت های مختلف رو براتون قرار میدم تا از هرکدوم که خواستید استفاده کنید:
$('#test1 img').picanim({initEf:'grayscale',hoverEf:'fadeIn'}); $('#test2 img').picanim({initEf:'blur',hoverEf:'fadeIn'}); $('#test3 img').picanim({initEf:'transparent',hoverEf:'fadeIn'}); $('#test4 img').picanim({initEf:'grayscale',hoverEf:'sliceUpLeft'}); $('#test5 img').picanim({initEf:'blur',hoverEf:'sliceUpRight'}); $('#test6 img').picanim({initEf:'transparent',hoverEf:'sliceDownLeft'}); $('#test7 img').picanim({initEf:'grayscale',hoverEf:'foldLeft'}); $('#test8 img').picanim({initEf:'blur',hoverEf:'foldRight'}); $('#test9 img').picanim({initEf:'transparent',hoverEf:'boxRandom',bgColor:'#ffffff'}); $('#test10 img').picanim({initEf:'blur',hoverEf:'boxDiagional'}); $('#test11 img').picanim({initEf:'transparent',hoverEf:'sliceUpLeft',slices:12,bgColor:'#555',animSpeed:500,tooltip:true});
امیدوارم که آموزش مفید بوده باشه…
منبع : دنیای وردپرس و برنامه نویسی – www.alimir.ir
تشکر آموزش خوبی بود
توسط seonab
عـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــالی
توسط سام
سلام
امکانش نیست این رو بصورت افزونه برای دانلود قرار بدید ؟
برای مدیریت محتوای وردپرس
توسط djapex
سلام. در این مورد خاص، واقعا نیازی به افزونه نیست.
اگه طبق آموزش پیش برید، به راحتی میتونید این ماژول رو در قالب وبسایتتون راه اندازی کنید.
توسط علی میرزائی
ممنون از این توضیحات شما
توسط آراد
مرسی خیلی باحال بود
توسط آراد
سلام و خسته نباشید
من میخوام ازین کد برای صفحه اول سایت (برای کلیک روی عکس جهت ورود) استفاده کنم.
میتونم بپرسم کلاس full-post-content رو چجوری باید بنویسم ؟
ممنون میشم راهنمایی کنین
توسط پیمان
سلام عالی بود
ممنون
توسط طراحی وب سایت
سلام دوست عزیز
من میخوام فقط یه قسمت از قالبم این امکان ایجاد شه برای اون چه کاری باید انجام بدم ؟
ممنون
توسط ahmadreza
مرسی خوب بود
توسط پنل اس ام اس
عالی بود برای ورد پرس ممون
توسط برش لیزری
میخوام ی افکتی به عکس یا لوگو بدم که هر چند ثانیه یک بار مثل زنگوله تکون بخوره
بدون این که موس بره روش
به صورت جی کوئری
توسط بهنام