در گذشته برای ایجاد انیمیشنی قدرتمند که قادر به کنترل تصاویر و متنها بصورت کامل باشد از محیط Flash استفاده میگردید. این محیط به توسعه دهندگان وب این امکان را میداد تا بتوانند تصاویر متحرک و افکتهای زیبا را به درون صفحات وب خود بیاورند اگرچه استفاده از این امکان برای ما معضلاتی نظیر ضعفهای امنیتی و همچنین زمان طولانی بارگذاری صفحات وب در زمانی که شما از سرعت اینترنت متوسط استفاده میکردید به دنبال داشت.

بعد از مدتی JavaScript و بدنبال آن کتابخانه های وابسته به آن نظیر jQuery ،Prototype و Moo tools برای ایجاد تصاویر متحرک آمدند که بسیاری از ضعفهای Flash را پوشش می دادند و جلوهای غنی انیمیشن را با حجمهای بسیار کمتر ایجاد می کردند. در سالهای اخیر عنصر جدیدی برای ایجاد تصاویر متحرک در وب بنام CSS3 پا به عرصه گذاشته که مزایای خوبی نظیر افزایش سرعت بعلت استفاده از بارگذاری مستقیم توسط مرورگر را در اختیار ما قرار می دهد. ما در این مقاله سعی داریم تا مقایسه ای میان CSS و jQuery در جهت تولید تصاویر متحرک انجام دهیم.

ایجاد یک انیمیشن در CSS

قبل از بررسی این موضوع در صورتی که آشنایی قبلی با انیمیشن سازی با استفاده از CSS ندارید توصیه میکنم تا با مرور مطالبی آموزشی در سایتهایی نظیر W3Schools.com با مقدمات اینکار آشنا شوید. همچنین وقتی بنده از واژه انیمیشن در قسمت CSS استفاده میکنم منظورم هر دو مورد CSS Transitions و CSS Animations است، هرچند که کاربرد آنها با هم تفاوت دارد. Transitionها رخداد محور بوده و با رخدادهایی نظیر :hover و یا :active فعال میگردند در صورتی کهAnimationها پیچیده تر بوده و بصورت خطی در هنگام بارگذاری صفحه اجرا میشوند ( هرچند میتوان آنها را توسط JavaScript نیز کنترل کرد).

لطفا به مثال ذیل توجه فرمایید، در این مثال سعی شده تا افکت محو شدن در jQuery ( .fadeIn())
شبیه سازی شود.

HTML

Anything Inside…

CSS

#example1{

width:5em;

height:10em;

background:blue;

animation:fadeIn 5s;

}

@keyframes fadeIn{

from {opacity:0;}

to {opacity:100;}

}

در مثال بالا سعی شده تا تمرکز اجرا بر روی مرورگرهای امروزی باشد و در صورتی که بخواهیم این مورد را به مرورگرهای قدیمی نیز تعمیم دهیم باید از پیشوندهایی نظیر –webkit- ، -moz- و… در تعریف انیمیشن خود استفاده نماییم. همچنین استفاده از نام fadeIn صرفا جهت هم نام سازی با jQuery بوده و شما میتوانید هر نام دلخواه دیگری را نیز برای انیمیشن خود انتخاب کنید.

ایجاد انیمیشن با استفاده از jQuery

حال که شما در مثال بالا اندکی با اساس تولید تصاویر متحرک در CSS آشنا شدید، بهتر است نمونه ای مشابه با کمک jQuery نیز بررسی شود. در مثال ذیل سعی شده تا با استفاده از رخداد .click و همچنین قابلیت .animate() عملیات بالا را اجرایی کنیم. در ابتدا با کمک CSS شی خود را طراحی کرده سپس با jQuery مراحل ظاهر شدن و همچنین زمان اجرای آنرا کنترل خواهیم کرد. لطفا دقت نمایید که قابلیت animate() در jQuery قادر به ایجاد تغییرات صرفا در خصوصیاتی از CSS میباشد که بصورت عددی مقدار دهی شده اند . بطور مثال ما قادر نیستیم که خصوصیت رنگ پس ضمینه را تغییر دهیم. برای اینکار میتونید مثلا از jQuery UI کمک بگیرید.

HTML

Anything Inside…

CSS

#example2{

width:0;

height:0;

overflow:hidden;

background:blue;

}

jQuery

$(‘#button’).click(function() {

$(‘#example2’).animate({

height: “10em”,

width: “5em”,

opacity: “100”,}, 4000

});

});

برای اجرای فرمان فوق شما باید کتابخانه jQuery را نیز در صفحه خود وارد نمایید.

همانطور که در بالا مشاهده مینمایید پیاده سازی انیمشن با CSS به مراتب سبکتر و ساده تر است. همچنین برای مقایسه بهتر ما با پیاده سازی یک محک که در آن چندین عنصر بصورت همزمان توسط CSS3 و همچنین jQuery دستخوش تغییر میگردند به نتایج بهتری می رسیم.

CSS

مدت زمان اجرای این محک تقریبا 2.29 ثانیه

jQuery

مدت زمان اجرای این محک تقریبا 8.33 ثانیه

محک فوق نشان میدهد که CSS بصورت کاملا آشکاری سریعتر از jQuery در اجرای تصاویر متحرک میباشد. علت این امر بخاطر آن است که CSS مستقیما از ساختارهای بومی خود مرورگر برای اجرای فرایند متحرک سازی استفاده می کند و این امکان را خواهد داشت تا دستورات گرافیکی را بکمک GPU سیستم به مورد اجرا بگذارد.

البته در این بین CSS نقاط ضعفی نیز دارد بطور مثال در هنگامی که یک شکل ثابت، هم در حال حرکت و هم تغییر سایز است، شما نمی توانید این عملیات را در دو قالب زمانی مختلف و همزمان به اجرا در آورید در حالی که jQuery این ضعف را ندارد.

نتیجه گیری

بدلیل برتری هایی که در بالا بیان گردید، میتوان نتیجه گرفت که CSS عنصر مناسبتری جهت اجرای طرحهای متحرک وب می باشد. همچنین بهتر است در صورتی که تمایل به استفاده از امکانات JavaScript در اجرای انیمیشن را دارید، از JavaScript Dom و یا از کتابخانه Velocity.js و یا GSAP که دارای کارایی بمراتب بهینه تری هستند استفاده نمایید.

لیست دوره های ارائه شده در دپارتمان وب و برنامه نویسی

ردیف عنوان دوره روزهای تشکیل تاریخ شروع تعداد ساعت شهریه (ریال) توضیح پیش نیاز ثبت نام
1 Programming with Python یکشنبه, سه شنبه 17:30 تا 20:30 02-08-16 60

48,000,000

ثبت نام
2 (آنلاین) programming with python یکشنبه, سه شنبه 17:30 تا 20:30 02-08-16 60

39,000,000

ثبت نام
3 Programming with Python جمعه 08:00 تا 13:00 02-09-10 60

48,000,000

ثبت نام
4 (آنلاین) programming with python جمعه 08:00 تا 13:00 02-09-10 60

39,000,000

ثبت نام
5 مقدمه ای بر الگوریتم و برنامه نویسی یکشنبه, سه شنبه 17:30 تا 20:30 02-08-23 37

22,000,000

ثبت نام
6 Web Design I (HTML5, CSS3 with Dreamweaver) روزهای زوج, 17:30 الی 20:30 02-08-24 58

36,000,000

ثبت نام
7 Web Design II (Responsive Design with Bootstrap, Less & Sass) پنجشنبه 14:00 تا 18:00 02-08-25 34

32,500,000

ثبت نام
8 (آنلاین) Python Web Development With Django پنجشنبه 08:00 تا 13:00 02-09-02 50

39,000,000

ثبت نام
9 Python Web Development With Django پنجشنبه 08:00 تا 13:00 02-09-02 50

49,000,000

ثبت نام
10 Web Design III (JavaScript & JQuery & Ajax) دوشنبه, چهارشنبه 17:30 تا 20:30 02-08-22 58

58,000,000

ثبت نام
11 Web Design III (JavaScript & jQuery & Ajax) آنلاین دوشنبه, چهارشنبه 17:30 تا 20:30 02-08-22 58

47,500,000

ثبت نام
12 Web Design III (JavaScript & JQuery & Ajax) پنجشنبه 08:00 تا 13:00 02-08-25 58

58,000,000

ثبت نام
13 Web Design III (JavaScript & JQuery & Ajax) شنبه, دوشنبه 18:00 تا 20:30 02-08-27 58

58,000,000

استاد جوان میر ثبت نام
14 Web Design III (JavaScript & jQuery & Ajax) آنلاین شنبه, دوشنبه 18:00 تا 20:30 02-08-27 58

47,500,000

استاد جوان میر ثبت نام
15 Web Design III (JavaScript & JQuery & Ajax) جمعه 13:00 تا 18:00 02-09-03 58

58,000,000

ثبت نام
16 Web Design III (JavaScript & jQuery & Ajax) آنلاین جمعه 13:00 تا 18:00 02-09-03 58

47,500,000

ثبت نام
17 بهینه سازی برای موتورهای جست و جو- SEO پنجشنبه 16:00 تا 20:00 02-08-18 40

43,000,000

ثبت نام
18 دوره طراحی رابط و تجربه کاربری (UI/UX) پنجشنبه 13:00 تا 18:00 02-08-18 40

36,000,000

ثبت نام
19 Wordpress & WooCommerce Essential Training پنجشنبه 13:00 تا 18:00 02-08-18 35

26,500,000

ثبت نام
20 Wordpress & SEO PACK جمعه 09:00 تا 13:00 02-09-03 75

62,500,000

ثبت نام
21 برنامه نویسی به زبان ++C پنجشنبه 13:00 تا 18:00 02-09-02 60

39,600,000

ثبت نام
22 برنامه نویسی به زبان ++C آنلاین پنجشنبه 13:00 تا 18:00 02-09-02 60

32,500,000

ثبت نام
23 C# Programming چهارشنبه 16:00 تا 20:00 02-08-24 60

41,000,000

ثبت نام
24 C# Programming آنلاین چهارشنبه 16:00 تا 20:00 02-08-24 60

33,000,000

ثبت نام
25 Microsoft ASP.net MVC جمعه 08:00 تا 13:00 02-08-26 60

65,000,000

ثبت نام
26 PHP & MYSQL Web Development پنجشنبه 09:00 تا 13:00 02-09-02 80

65,500,000

ثبت نام
27 PHP & MYSQL Web Development آنلاین پنجشنبه 09:00 تا 13:00 02-09-02 80

52,500,000

ثبت نام
28 Android Pack پنجشنبه 13:00 تا 18:00 02-08-25 70

61,500,000

ثبت نام
29 Java SE8 Programming چهارشنبه 17:00 تا 21:00 02-08-24 50

45,000,000

ثبت نام
30 SQL Server 2022 Database Development جمعه 13:00 تا 18:00 02-09-03 60

42,900,000

ثبت نام

مقالات مرتبط با وب و برنامه‌نویسی

[carousel_posts_sc type=”cbp_type02″ scroll=”yes” category=”web-programming-training”]
منتشر شده توسط
مجتمع فنی تهران

مقالات اخیر