نمایش دلخواه و حرفه ای GIF با المنت سفارشی x-gif

در این آموزش میخوام یک المنت سفارشی رو بهتون معرفی کنم که با استفاده از اون میتونین تصاویر GIF مورد نظرتون رو به هر صورتی که میخواید نمایش بدین و اونا رو سفارش سازی کنید.

این المنت سفارشی، x-gif نام دارد و با استفاده از ویژگی هایی مختلفی که در اختیارتون قرار میده، میتونین تصاویر متحرک رو به صورت های مختلفی نمایش بدین.

دمو

همونطور که میدونین با استفاده از مبحث Web Component میتونین قالبهای مورد نظرتون رو در HTML به وجود بیارید و اونا رو بارها مورد استفاده قرار بدین. با اینکار پروژتون منظم تر میشه و هر فایل یک جزء رو به وجود میاره.

Web component شامل 4 ویژگی اصلی بصورت زیر می باشد و میتونین از همه اونا یا بصورت تکی از اونا استفاده کنید:

• Custom elements : یک API که با استفاده از اون میتونین تگ های HTML جدید رو به وجود بیارید
• Shadow DOM : با استفاده از این مورد میتونین اون جزء و استایلهای مربوط به اون رو از بقیه اجزائ صفحه جداسازی کنید و استایلهای یک Component بر استایلهای موارد دیگر تاثیری نخواهد گذاشت.
• HTML Import : با استفاده از این روش میتونین یک فایل HTML رو در یک فایل HTML دیگر لود کنید. با استفاده از این قابلیت Component ها یا اجزائ مورد نظرمون رو در سند فعلی لود خواهیم کرد.
• HTML Templates : میتونین در <template> المنت های مورد نظرتون رو قرار بدین و Component مورد نظرتون رو به وجود بیارید.

دیگه بیشتر از این در مورد Web Component توضیح نمیدم و میتونین خودتون این لینک رو مطالعه کنید و چیزای بیشتری رو از اون یاد بگیرید.

خب x-gif هم یک المنت سفارشی ساخته شده در زمینه Web Component می باشد که سازنده این Component، اون رو برای دستکاری در نحوه نمایش تصاویر GIF به وجود آورده است.

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

• سریع یا کند نمایش دادن تصاویر GIF
• نمایش برعکس تصاویر از آخر به اول
• هماهنگ کردن تصویر با فایل صوتی
• به وجود آوردن حالت ping pong برای ساخت تصاویر رفت و برگشتی
• و ...

پشتیبانی مرورگر ها از Web Component ها خیلی خوب نیست و در ادامه روشی رو قرار میدیم که میتونیم اون رو برای مرورگرهایی که از این ویژگی پشتیبانی نمی کنند نیز مورد استفاده قرار بدیم.

نحوه استفاده از x-gif

خب در ابتدا باید کدهای زیر رو در بالای صفحه و در تگ Head قرار بدیم:

همونطور که میبینید در ابتدا بررسی شده است که 4 ویژگی مربوط به Web Component در مرورگر فعلی پشتیبانی می شود یا خیر. اگر مرورگر از این ویژگی پشتیبانی بکنه که کار خاصی نیاز نیست انجام بدیم. اما اگر مرورگر این ویژگی رو پشتیبانی نکند، فایل platform.js رو لود میکنیم که این موارد رو برای ما شبیه سازی میکنه و در همه مرورگرها میتونیم از این مورد استفاده کنیم.

در نهایت در خط 12 با استفاده از تگ link فایل x-gif.html که جزء یا Component مربوط به تگ سفارشی x-gif می باشد رو لود میکنیم و میتونیم از اون استفاده کنیم.

فایل x-gif.html رو در انتها قرار میدیم که میتونین اون رو دانلود کرده و تست کنید.

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

میبینید که درون ویژگی src آدرس تصویر مورد نظر رو قرار دادیم. زمانی که به این صورت و بدون هیچ ویژگی از این تگ استفاده میکنیم، تصویر GIF مورد نظر بصورت عادی و نرمال نمایش داده می شود.

ویژگی هایی هستند که میتونین از اونا استفاده کنید:

• speed : با استفاده از این ویژگی میتونین سرعت نمایش تصویر رو کم و زیاد کنید. مقدار پیش فرض 1 می باشد. مثلا اگر مقدار اون رو 3 قرار بدیم، تصویر با سرعت 3 برابر نمایش داده میشه و اگر 0.5 قرار بدیم، سرعت نمایش تصویر دو برابر کندتر می شود.
• sync
• bpm
• stopped : با استفاده از این ویژگی تصویر مورد نظر متوقف و ثابت میشه
• fill
• n-times : با استفاده از این ویژگی میتونین تصویر رو به دفعات مشخصی نمایش بدین
• snap
• ping-pong : با استفاده از این ویژگی تصویر مورد نظر بصورت رفت و برگشتی نمایش داده میشه.

بصورت زیر میتونین از این ویژگی ها استفاده کنید:

خروجی این موارد رو میتونین در دمو مشاهده کنید.

لینک دانلود

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

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

یا علی

component flexible gif ping-pong playback polymer speed sync