در این آموزش میخوام یک المنت سفارشی رو بهتون معرفی کنم که با استفاده از اون میتونین تصاویر GIF مورد نظرتون رو به هر صورتی که میخواید نمایش بدین و اونا رو سفارش سازی کنید.
این المنت سفارشی، x-gif نام دارد و با استفاده از ویژگی هایی مختلفی که در اختیارتون قرار میده، میتونین تصاویر متحرک رو به صورت های مختلفی نمایش بدین.
دمو
همونطور که میدونین با استفاده از مبحث Web Component میتونین قالبهای مورد نظرتون رو در HTML به وجود بیارید و اونا رو بارها مورد استفاده قرار بدین. با اینکار پروژتون منظم تر میشه و هر فایل یک جزء رو به وجود میاره.
Web component شامل 4 ویژگی اصلی بصورت زیر می باشد و میتونین از همه اونا یا بصورت تکی از اونا استفاده کنید:
دیگه بیشتر از این در مورد Web Component توضیح نمیدم و میتونین خودتون این لینک رو مطالعه کنید و چیزای بیشتری رو از اون یاد بگیرید.
خب x-gif هم یک المنت سفارشی ساخته شده در زمینه Web Component می باشد که سازنده این Component، اون رو برای دستکاری در نحوه نمایش تصاویر GIF به وجود آورده است.
با استفاده از این تگ سفارشی میتونین کارهای مختلفی به شرح زیر رو انجام بدین:
پشتیبانی مرورگر ها از Web Component ها خیلی خوب نیست و در ادامه روشی رو قرار میدیم که میتونیم اون رو برای مرورگرهایی که از این ویژگی پشتیبانی نمی کنند نیز مورد استفاده قرار بدیم.
خب در ابتدا باید کدهای زیر رو در بالای صفحه و در تگ Head قرار بدیم:
همونطور که میبینید در ابتدا بررسی شده است که 4 ویژگی مربوط به Web Component در مرورگر فعلی پشتیبانی می شود یا خیر. اگر مرورگر از این ویژگی پشتیبانی بکنه که کار خاصی نیاز نیست انجام بدیم. اما اگر مرورگر این ویژگی رو پشتیبانی نکند، فایل platform.js رو لود میکنیم که این موارد رو برای ما شبیه سازی میکنه و در همه مرورگرها میتونیم از این مورد استفاده کنیم.
در نهایت در خط 12 با استفاده از تگ link فایل x-gif.html که جزء یا Component مربوط به تگ سفارشی x-gif می باشد رو لود میکنیم و میتونیم از اون استفاده کنیم.
فایل x-gif.html رو در انتها قرار میدیم که میتونین اون رو دانلود کرده و تست کنید.
حالا میتونیم در قسمت body صفحه از این تگ سفارشی استفاده کنیم. بصورت زیر:
میبینید که درون ویژگی src آدرس تصویر مورد نظر رو قرار دادیم. زمانی که به این صورت و بدون هیچ ویژگی از این تگ استفاده میکنیم، تصویر GIF مورد نظر بصورت عادی و نرمال نمایش داده می شود.
ویژگی هایی هستند که میتونین از اونا استفاده کنید:
بصورت زیر میتونین از این ویژگی ها استفاده کنید:
خروجی این موارد رو میتونین در دمو مشاهده کنید.
لینک دانلود
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید.
یا علی
component flexible gif ping-pong playback polymer speed sync
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 301