امروز : سه شنبه ۳ مهر ۱۳۹۷ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

برای استعلام یا ارسال سفارش اینجا کلیک کنید.

نمایش  GIF با استفاده از x-gif

برچسب ها

در این مقاله میخواهیم بهتون آموزش بدیم که چطور میشه gif دلخواهتان را سفارشی سازی کنید و هر طور که میخواهید نمایش دهید. این ابزار X-Gif نام دارد که این امکان را به شما میدهد که gif هایتان را به صورت های مختلفی نمایش دهید.این ابزار یک المنت سفارشی ساخته شده در حوزه ی Web Componnet است که هدف از ساخت آن توانایی تغییر در نحوه ی نمایش تصاویر gif است.

 

x-gif نمایش  GIF با استفاده از x-gif

امکانات X-Gif :

1-تغییر در سرعت نمایش تصاویر gif

2-هماهنگ شدن تصویر gif  با فایل صوتی

3-ایجاد حالت ping pong برای به وجود آوردن تصاویر رفت و برگشتی

4-نمایش برعکس gif از آخر  به اول

مرورگر ها معمولا از 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">

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

اما اگر پشتیبانی نمی کند که باید فایل platform.js را لود کنیم که این ویژگی را برای ما شبیه سازی میکند و میتوانیم در همه ی مرورگر ها استفاده کنیم.

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

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

<x-gif src="sample.gif"></x-gif>

همان طور که مشخص است آدرس تصویر را در قسمت src  قرار می دهیم. زمانی که از این تگ بدون هیچ ویژگی استفاده می کنیم تصویر gif  به صورت عادی به نمایش در می آید.

ویژگی های X-Gif :

1-speed : با استفاده از این ویژگی میتوان سرعت نمایش را تغییر داد.مقدار پیش فرض این ویژگی 1 است و اگر سرعت آن را 2 قرار دهیم تصویر با سرعت دو برابر اجرا می شود و اگر 0.5 قرار دهیم سرعت  نمایش دو برابر کندتر می شود.

2-sync

3-bpm

4-stopped : تصویر ثابت میشود.

5-fill

6-n-times : تصویر به دفعات مشخصی تکرار میشود.

7-snap

8-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>

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

دمو

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : جهت ورود به تاپیک آموزش و مشکلات این مطلب کلیک کنید.

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 287 بار دسته بندی : آموزش css دیدگاه : ۰ تاريخ : ۹ دی ۱۳۹۶
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما
فائزه سلطان پور

مهندسی نرم افزار با ذهنی خلاق و کوشا در حال فعالیت در اوینا وب هستم و در زمینه سئو ، تولید محتوا و طراحی قالب وردپرس مشغول هستم :))

دیدگاه کاربران تعداد دیدگاه : ۰