• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

dom-animator : انیمیشنی کردن comment در inspector مرورگرها

2 1366 ۹ فروردین ۹۴

در این مطلب میخوام یک ابزار جالب و کاربردی بنام dom-animator رو خدمت شما معرفی کنم و نحوه استفاده از اونو آموزش بدم.

dom-animator

با استفاده از این ابزار ساده و سبک میتونین کارهای جالب و شگفت انگیزی انجام بدین. اگر Inspector مرورگرهای مختلف رو باز کنید ، کدها بصورت ثابت هستن و هیچ انیمیشنی در آنها وجود ندارد. با استفاده از این ابزار میتونین comment ( نظراتی ) رو به صفحتون اضافه کنید که فقط در inspector حالت انیمیشنی داره و میتونین در اون به کسانی که سایتتون رو در inspector باز میکنند انیمیشنی از کدها و لغات رو نشون بدین ، یا حتی به اون فرد اطلاعاتی رو بدید.

dom-animator1اگر inspector رو باز کنید خواهید دید که در همان ابتدای کدهای حالت انیمیشنی زیبایی از کدهای قرار داده شده است ، که شبیه به یک میمون هست.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Githubبرید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به dom-animator.min.js نیاز داریم. این فایل رو در انتهای مطلب قرار دادم و میتونین از اون استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایل مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو قرار دادیم.

این ابزار خیلی سبک هست و حجمی تقریبا برابر با 2 کیلو بایت داره. همچنین این ابزار به هیچ کتابخانه ای مانند jQuery نیاز نداره.

برای استفاده از ابزار باید در ابتدا تعدادی frame مشخص کنید. هر فریم یک نما از انیمیشن مارو تشکیل میده و میتونین هر چیزی در هر فریم قرار بدین. از جملات ساده ، تا اشکال پیچیده رو میتونین در این فریمها قرار بدین و اونا رو بصورت انیمیشنی در بیارین. میتونین اشکال پیچیده رو خودتون بسازید و یا اینکه از سایتهایی همانند این سایت استفاده کنید و اشکال مورد نظرتون رو انتخاب کنید.

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

در ابتدا باید با استفاده از عملگر new یک نمونه از شئ DomAnimator بسازید ، بصورت زیر :

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

میبینید که با استفاده از حروف اشکال مورد نظر رو میشه ساخت. بعد از اون باید این فریم ها رو یکی یکی به متد addFrame اضافه کنید :

بعد از اون باید این فریمها رو بصورت انیمیشنی در بیارین. بصورت زیر :

میبینید که متد animate رو برای اینکار فراخوانی کردیم. در اون هم 1000 قرار دادیم. یعنی هر 1000 میلی ثانیه یکبار فریمها عوض بشن. بهمین راحتی.

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

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

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    عالی بود! فکر نمیکردم امکان داشته باشه :)

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram