در این آموزش میخوام یک المنت سفارشی رو بهتون معرفی کنم که با استفاده از اون میتونین تصاویر 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 قرار بدیم:
<script>
if ('registerElement' in document
&& 'createShadowRoot' in HTMLElement.prototype
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// We're using a browser with native WC support!
} else {
document.write('<script src="https:\/\/cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"><\/script>')
}
</script>
<link rel="import" href="x-gif.html">
همونطور که میبینید در ابتدا بررسی شده است که 4 ویژگی مربوط به Web Component در مرورگر فعلی پشتیبانی می‌شود یا خیر. اگر مرورگر از این ویژگی پشتیبانی بکنه که کار خاصی نیاز نیست انجام بدیم. اما اگر مرورگر این ویژگی رو پشتیبانی نکند، فایل platform.js رو لود میکنیم که این موارد رو برای ما شبیه سازی میکنه و در همه مرورگرها میتونیم از این مورد استفاده کنیم.
در نهایت در خط 12 با استفاده از تگ link فایل x-gif.html که جزء یا Component مربوط به تگ سفارشی x-gif می‌باشد رو لود میکنیم و میتونیم از اون استفاده کنیم.
فایل x-gif.html رو در انتها قرار میدیم که میتونین اون رو دانلود کرده و تست کنید.
حالا میتونیم در قسمت body صفحه از این تگ سفارشی استفاده کنیم. بصورت زیر:
<x-gif src="sample.gif"></x-gif>
میبینید که درون ویژگی src آدرس تصویر مورد نظر رو قرار دادیم. زمانی که به این صورت و بدون هیچ ویژگی از این تگ استفاده میکنیم، تصویر GIF مورد نظر بصورت عادی و نرمال نمایش داده می‌شود.
ویژگی هایی هستند که میتونین از اونا استفاده کنید:
- speed : با استفاده از این ویژگی میتونین سرعت نمایش تصویر رو کم و زیاد کنید. مقدار پیش فرض 1 می‌باشد. مثلا اگر مقدار اون رو 3 قرار بدیم، تصویر با سرعت 3 برابر نمایش داده میشه و اگر 0.5 قرار بدیم، سرعت نمایش تصویر دو برابر کندتر می‌شود.
- sync
- bpm
- stopped : با استفاده از این ویژگی تصویر مورد نظر متوقف و ثابت میشه
- fill
- n-times : با استفاده از این ویژگی میتونین تصویر رو به دفعات مشخصی نمایش بدین
- snap
- ping-pong : با استفاده از این ویژگی تصویر مورد نظر بصورت رفت و برگشتی نمایش داده میشه.
بصورت زیر میتونین از این ویژگی‌ها استفاده کنید:
<h1>Normal</h1> <x-gif src="sample.gif"></x-gif> <h1>Ping Pong</h1> <x-gif src="sample.gif" ping-pong></x-gif> <h1>N-times</h1> <x-gif src="sample.gif" n-times="3"></x-gif> <h1>Speed</h1> <x-gif src="sample.gif" speed="3"></x-gif>
خروجی این موارد رو میتونین در دمو مشاهده کنید.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید.
یا علی
اولین دیدگاه این پست رو تو بنویس !