ترفندهای پیشرفته jQuery (قسمت 41)

- visibility ٠ mode_comment

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم. jquery trickshot

موضوع پنجم : استفاده از پلاگینها

ترفند 74 : jQuery رو با استفاده از انیمیشنهای CSS3 ارتقاء بدین

انیمیشنهای CSS3 بسیار سریعتر و بهینه تر از انیمیشنهایی هستند که با استفاده از Javascript ساخته شده اند، اما انیمیشنهای CSS3 در همه مرورگرها پشتیبانی نمیشن. با استفاده از jquery-animate-enhanced میتونین از انیمیشنهای CSS3 تنها در مواقعی که مقدوره و مرورگر پشتیبانی میکنه استفاده کنید و در غیر اینصورت از انیمیشنهای Javascript بجای اونا استفاده میشه.

در ابتدا باید این ابزار رو include کنید:

کد HTML:

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

کد JS:

چونکه ما ابزار رو include کردیم بصورت اتوماتیک زمانی که مرورگر از CSS3 پشتیبانی کنه انیمیشنهای CSS3 اعمال میشن.

هیچ تغییر دیکه ای لازم نیس و مثل گذشته انیمیشنهاتونو قرار بدین. این ابزار بصورت اتوماتیک تمام کارهارو براتون انجام میده و شما نیازی نیس که کاری رو انجام بدین.

ترفند 75 : نمایش تمام صفحه ویدیوهای Youtube برای Background

اینو میدونید که میشه ویدیوهایی که در Youtube قرار دارن رو بصورت تمام صفحه و برای Background قرار داد؟ در اینجا روش انجام کار با استفاده از OkVideo توضیح داده میشه.

در ابتدا این ابزار رو include میکنیم:

کدهای JS:

میبینید که به راحتی آدرس ویدیوی مورد نظر رو وارد کردیم و با اینکار ابزار مورد نظر کار رو برای ما انجام میده. این ابزار امکانات دیگه ای هم دارد که میشه به پشتیبانی از ویدیوهای Vimeo ، کنترل کردن صدا و کیفیت و ... اشاره کرد. یه نمونه از کد رو براتون قرار میدم:

با استفاده از این ابزار میتونین زیبایی خاصی رو به سایتتون ببخشید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.