ساخت انیمیشن در صفحات وب با فریم ورک jsMorph


استفاده از jQuery در طراحی صفحات وب این روزها به علت نیاز به نمایش اطلاعات به صورت اسلایدی و به کارگیری منوهای بازشو و … بسیار رواج پیدا کرده است اما در اکثر اوقات می توان به جای استفاده از jQuery از دیگر چارچوب نرم‌افزاری یا فریم ورک های خیلی سبک و ساده تر استفاده بکنیم که در این نوشته به معرفی فریم ورک جاوا اسکریپتی jsMorph می پردازیم که با استفاده از آن می توانید به راحتی هر یک از عناصر و نوشته های صفحات وب خود را به حرکت در آورده و با توجه به عملکرد کاربر و رویداد ها حرکت مورد نظر خود را برای هر یک از عناصر موجود در صفحات وب خود تعیین کنید.

چارچوب نرم‌افزار ( Framework ) چه معنا است ؟

قبل از اینکه به چگونگی به حرکت درآوردن عناصر در صفحات وب بپردازیم بهتر است با معنای فریم ورک آشنا شویم. در حقیقت برنامه نویسان و توسعه دهندگان می توانند با استفاده از فریم ورک های از قبل طراحی شده تمرکز اصلی خود را بر روی نتیجه نهایی برنامه خود بگذارند و انجام چگونگی کار و جزئیات را در اختیار فریم ورک مورد نظر بگذارند. درست است که با استفاده از فریم ورک ها کمتر می توانیم جزئیات را مشخص کنیم اما در سرعت انجام پروژه ها و کیفیت نهایی آن ها می تواند استفاده از فریم ورک ها کمک بزرگی را به ما بکند. توجه داشته باشید در ساخت چارچوب نرم‌افزار یا همان فریم ورک همیشه سعی می شود با حداقل حجم و کدنویسی فریم ورک ما بتواند بیشترین بازدهی را داشته باشد.
حال وقتی می خواهیم با فریم ورک jsMorph به طراحی انیمیشن و حرکت اجزای صفحات وب بپردازیم کافی است این فریم ورک را در کدهای صفحات وب خود فراخوانی کنیم و با خیال آسوده با استفاده از توابعی که این فریم ورک در اختیار ما می گذارد به انیمیشن سازی و حرکت دادن متن ها ، دکمه ها ، تصاویر و دیگر عناصر موجود در صفحات وب خود بپردازیم.

مزایای استفاده از فریم ورک jsMorph

تا کنون فریم ورک های زیادی ساخته شده اند که با استفاده از آن ها می توانید عناصر مختلف را در صفحات سایت خود برای بازدید کنندگان به حرکت درآورید اما دلیل ما از معرفی jsMorph و پیشنهاد به شما برای استفاده از آن عبارتند از :

  1. برای اجرا و استفاده از این فریم ورک در مرورگر بازدید کنندگان سایت شما تنها نیاز به پشتیبانی از جاوا اسکریپت است و شما نیز نیاز به استفاده از هیج فریم ورک و اضافه دیگری برای استفاده از آن ندارید.
  2. این فریم ورک بر خلاف دیگر فریم ورک های مشابه خود تنها 2.3 کیلوبایت حجم دارد و در کثری از ثانیه بر روی مرورگر بازدید کنندگان سایت شما دریافت و اجرا می شود.
  3. به صورت خودکار توانایی تشخیص مختصات فعلی هر یک از عنصرهای موجود در صفحات سایت شما را دارد و برای به حرکت در آوردن آن عنصر ها تنها کافی است تعیین کنید که می خواهید به کدام طرف و مثلاً با چه سرعتی آن عنصر حرکت کند.
  4. در هنگام کار با این فریم ورک دیگر نگران تبدیل واحد های مختلف مانند پیکسل ، سانتیمتر ، میلیمتر و … به همدیگر نیستید و می توانید از هر یک از این واحدها برای تعیین مقدار جا به جایی هر یک از عناصر استفاده کنید.
  5. یک فریم ورک تازه است که نظر خیلی از توسعه دهندگان را به خود جلب کرده است و به زودی شاهد بسیاری از افزونه های مفید برای این فریم ورک خواهیم بود.
  6. به گونه ای طراحی شده است که نیاز به کد نویسی به حداقل برسد و شما فقط نیاز دارید که تعیین کنید که می خواهید در مراحل مختلف شی مورد نظر شما چقدر جابه جایی داشته باشد و این عمل با چه سرعتی انجام شود.
  7. و …

آموزش فراخوانی فریم ورک jsMorph در صفحات وب

برای استفاده از jsMorph در صفحات وب خود تنها کافی است همانطور که در بالاتر نیز توضیح دادیم فایل مربوط به این فریم ورک را در کدهای صفحه مورد نظر خود که می خواهیم از این فریم ورک در آن استفاده کنیم فراخوانی کنیم. برای این کار تنها کافی است بعد از دریافت jsMorph از سایت رسمی و توسعه دهنده این فریم ورک جاوا اسکریپتی ، از کد زیر در کدهای HTML صفحه وب خود استفاده کنیم.
1 <script src="jsMorph_min.js" type="text/javascript"></script>


توجه داشته باشید که برای افزایش سرعت بارگذاری و نمایش صفحات وب خود بهتر است این فایل جاوااسکریپتی و دیگر فایل های جاوا اسکریپتی مورد نیاز خود را در پایان کدهای HTML صفحه و البته قبل از تگ </body> فراخوانی کنید.
شروع کار با jsMorph برای انیمیشن سازی

اگر می خواهید طریقه استفاده از این فریم ورک را آموزش ببینید به شما پیشنهاد می کنم حتماً سری به قسمت نمونه ها ( Demo ) سایت رسمی این فریم ورک بزنید و با دیدن کارهایی که با استفاده از این فریم ورک خلق شده است و البته دقت بر روی کدهای نوشته شده برای آن ها می توانید به آسانی با تمام جزئیات کار با آن آشنا شوید.
همچنین پیشنهاد می کنم اگر شما نیز می خواهید کدهای جاوا اسکریپت جدیدی را با استفاده از این فریم ورک بنویسید در خود فایل این فریم ورک که دانلود کرده اید آن کدها را قرار دهید و سپس فایل حاوی کدهای فریم ورک و کدهای نوشته شده شما را در صفحات وب مورد نظر فراخوانی کنید تا در آینده اگر خواستید انیمیشن های سایت خود را ویرایش کنید به راحتی کدهای مورد نظر را پیدا کرده و به آسانی تغییرات را انجام دهید.