ارزدیجیتال
حراجی دامنه های ویژهمشاهده





پلتفرم رپورتاژ آگهی و بک لینک تسمینو
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

افکت به تصاویر با استفاده از اسکریپت Picanim

آموزش ها , اسکریپت ها , ديگر اسكريپتها , مقالات,آموزش,ترفند

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

افکت به تصاویر با استفاده از اسکریپت Picanim

نمونه فراخوانی (در 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});

امیدوارم که آموزش مفید بوده باشه…

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

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 2 آموزش ها , اسکریپت ها , ديگر اسكريپتها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=7660
کلمات کلیدی پست :
مطالب مرتبط
15,326اسکریپت اسلایدر جی کوئری Zoom In/Out نسخه 2.0 تاریخ : 2016/05/17
11,234پلاگین ابزار رنگ ها به سبک فتوشاپ به صورت جی کوئری تاریخ : 2014/02/25
21,478افزونه ساخت تب های حرفه ای در وردپرس CodeTabs تاریخ : 2017/12/17
19,337اسکریپت افکت گذاری بر روی تصاویر Shape Hover تاریخ : 2014/11/24
9,734روبان بسیار زیبای متحرک به صورت جی کوئری تاریخ : 2014/03/28
10,740پلاگین جی کوئری Slickhover تاریخ : 2016/02/21
8,928پلاگین سنجاق کردت تصاویر با جی کوئری تاریخ : 2016/02/20
11,416افکت زیبا بر روی تصاویر به صورت جی کوئری تاریخ : 2014/01/17
13,490رابط کاربری iMessage در 9 IOS با جی کوئری تاریخ : 2016/04/21
16,364اسکریپت ایجاد صفحات Flip Book با اسکریپت WOWBook تاریخ : 2013/10/29
12,884ویجت نمایش آب و هوا با جی کوئری تاریخ : 2016/02/20
12,138فهرست آبشاری با بهره گیری از جی کوئری تاریخ : 2014/07/29
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file