طراحی و بهینه سازیمشاهده

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumسورس اپلیکیشن اندروید برای وردپرس01amir.etedal
iconforumدرخواست هاست اسپانسری958alifbi
iconforumفارسی سازی و نال کردن ماژول forum whmcs06ariaweb
iconforumتغییر دامین در ورپرس215mansour_bi2
iconforumافزونه پیشخوان جی میل + My GMail08AynaZ
iconforum200 فاکتور سئو سایت گوگل: فهرست کامل + توضیحات311992AynaZ
iconforumقابلیت های نسخه جدید تلگرام06AynaZ
iconforumسفارش پلاگین وردپرس124AynaZ
iconforumافزونه کوتاه کننده8118AynaZ
iconforumکسی قالب گود نیوز رو داره ؟ا543AynaZ
iconforumدانلود پوسته مولتی نیوز فارسی و راستچین شده8225AynaZ
درگاه پرداخت
درگاه پرداخت

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

آموزش ها , اسکریپت ها , ديگر اسكريپتها , مقالات,آموزش,ترفند
افکت به تصاویر با استفاده از اسکریپت PicanimReviewed by Admin on Jul 27Rating:

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

نمونه فراخوانی (در html5):

پس از فراخوانی اسکریپت، نوبت به استفاده از فایل ها در قالب میرسه. برای این کار باید از دستور .picanim() استفاده کنیم.

نحوه استفاده از این دستور رو با یک نمونه مثال میزنم: (کدهای زیر  رو داخل تگ script در بخش body یا head پوسته  به کار ببرید.)
* نکته: در این آموزش ما قصد داریم که نحوه استفاده ی پویا از اسکریپت رو بهتون آموزش بدیم. در صورت تمایل میتونید از اسکریپت به صورت استاتیک هم استفاده کنید.

توضیحات:

در نمونه بالا، ابتدا کلاس full-post-content رو که سلکتور اصلی تک نوشته های من رو تشکیل میده تعریف کردم و سپس تگ img رو با یک فاصله در مقابلش قرار دادم تا اشاره کنم که دستور picanim تنها برای تصاویر قابل استفاده است.

 

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

حتما بخوانید  اسکریپت ایجاد سایت های آگهی رایگان OSclass نسخه 3.2.1

در مرحله بعد نوبت به استفاده از دستور .picanim میرسه. اما همونطور که مشاهده میکنید از این دستور به شکل خالی استفاده نکردم و داخل پراتنز دستورات دیگری رو هم قرار دادم. این دستورات در واقع افکت های اسکریپت رو تشکیل میدن.
دستور initEF افکت اولیه تصویر رو تعریف میکنه که دارای سه گزینه به شرح زیر:

  • transparent – شفاف
  • grayscale – سیاه سفید
  • blur – مات

 

دستور hoverEF برای زمانیه که موس بر روی تصویر قرار میگیره و یک حالت انیمیشنی  رو در اون ایجاد میکنه . نمونه های قابل استفاده در این بخش عبارتند از:

  • fadein
  • sliceDownLeft
  • sliceDownRight
  • sliceUpLeft
  • sliceUpRight
  • foldLeft
  • foldRight
  • boxRandom
  • boxDiagional

در آخر چند مثال از افکت های مختلف رو براتون قرار میدم تا از هرکدوم که خواستید استفاده کنید:

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

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

حتما بخوانید  اجرای موسیقی آنلاین در وب سایت با Sticky HTML5 Music Player نسخه 1.6

به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

خرید هاست حرفه ای سازگار با انواع اسکریپت همراه با نصب رایگان

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1393/05/5 2 آموزش ها , اسکریپت ها , ديگر اسكريپتها , مقالات,آموزش,ترفند

لینک کوتاه مطلب : http://www.20script.ir/?p=7660

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
3,383دانلود فرم ارسال دیدگاه بسیار زیبا جی کوئری تاریخ : 1392/09/3
7,175اسکریپت افکت گذاری بر روی تصاویر Shape Hover تاریخ : 1393/09/3
2,343پلاگین جی کوئری زیبا ساز چک باکس تاریخ : 1393/04/30
2,333اسکریپت تب های پیوند دار تاریخ : 1393/05/13
1,086پلاگین جی کوئری نمایش فید مخازن گیتهاب Github تاریخ : 1395/01/26
6,320قالب بسیار زیبای هاستینگ به صورت HTML تاریخ : 1393/05/5
1,938منوی حرفه ای به صورت جی کوئری تاریخ : 1392/08/3
2,196افکت سه بعدی بر روی تصاویر به صورت جی کوئری تاریخ : 1392/10/2
1,802افزونه حرفه ای مکعب نمونه کارها تاریخ : 1392/09/24
2,506Seven Slider اسلایدر فوق العاده زیبا به صورت جی کوئری تاریخ : 1392/08/30
1,998دانلود ویترین کشویی جی کوئری تاریخ : 1392/09/23
2,914ساخت تولتیپ خودکار با کمک جی کوئری تاریخ : 1393/04/31
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب