در گذشته برای ایجاد انیمیشنی قدرتمند که قادر به کنترل تصاویر و متنها بصورت کامل باشد از محیط 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
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
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 | Web Design I (HTML5, CSS3 with Dreamweaver) | جمعه 13:00 تا 18:00 | 04-03-30 | 58 | 54,000,000 44,280,000 | |||
| 2 | Web Design I ( HTML5, CSS3 with Dreamweaver) آنلاین | جمعه 13:00 تا 18:00 | 04-03-30 | 58 | 43,000,000 34,400,000 | |||
| 3 | Web Design I (HTML5, CSS3 with Dreamweaver) | یکشنبه, سه شنبه 08:00 تا 13:00 | 04-04-01 | 58 | 54,000,000 44,280,000 | |||
| 4 | Web Design II (Responsive Design with Bootstrap, Less & Sass) | یکشنبه, سه شنبه 17:30 تا 20:30 | 04-03-25 | 34 | 49,000,000 39,200,000 | |||
| 5 | Web Design II (Responsive Design with Bootstrap, Less & Sass) | جمعه 13:00 تا 17:00 | 04-04-06 | 34 | 49,000,000 39,200,000 | |||
| 6 | Web Design II (Responsive design with bootstrap , Less & Sass) آنلاین | جمعه 13:00 تا 17:00 | 04-04-06 | 34 | 40,000,000 32,000,000 | |||
| 7 | Web Design III (JavaScript & JQuery & Ajax) | جمعه 09:00 تا 13:00 | 04-03-09 | 58 | 88,000,000 77,440,000 | |||
| 8 | Web Design III (JavaScript & jQuery & Ajax) آنلاین | جمعه 09:00 تا 13:00 | 04-03-09 | 58 | 71,000,000 61,060,000 | |||
| 9 | Web Design III (JavaScript & JQuery & Ajax) | پنجشنبه 15:00 تا 20:00 | 04-04-05 | 58 | 88,000,000 77,440,000 | |||
| 10 | Web Design III (JavaScript & jQuery & Ajax) آنلاین | پنجشنبه 15:00 تا 20:00 | 04-04-05 | 58 | 71,000,000 61,060,000 | |||
| 11 | ReactJS | پنجشنبه 08:00 تا 13:00 | 04-04-19 | 40 | 70,000,000 60,200,000 | |||
| 12 | مقدمه ای بر الگوریتم و برنامه نویسی | یکشنبه, سه شنبه 13:30 تا 17:30 | 04-03-27 | 40 | 33,000,000 26,400,000 | |||
| 13 | مقدمه ای بر الگوریتم و برنامه نویسی | روزهای زوج, 8:30 الی 12:30 | 04-03-28 | 40 | 33,000,000 26,400,000 | |||
| 14 | مقدمه ای بر الگوریتم و برنامه نویسی آنلاین | جمعه 08:00 تا 13:00 | 04-03-30 | 40 | 28,000,000 22,400,000 | |||
| 15 | مقدمه ای بر الگوریتم و برنامه نویسی | جمعه 08:00 تا 13:00 | 04-03-30 | 40 | 33,000,000 26,400,000 | |||
| 16 | Programming with Python | یکشنبه, سه شنبه 08:00 تا 13:00 | 04-04-03 | 60 | 80,000,000 64,000,000 | |||
| 17 | Programming with Python | یکشنبه, سه شنبه 17:30 تا 20:30 | 04-04-08 | 60 | 80,000,000 70,400,000 | |||
| 18 | (آنلاین) programming with python | یکشنبه, سه شنبه 17:30 تا 20:30 | 04-04-08 | 60 | 64,000,000 54,400,000 | |||
| 19 | Python Programming Advanced آنلاین | پنجشنبه 13:00 تا 18:00 | 04-04-12 | 60 | 84,000,000 73,920,000 | |||
| 20 | Python Programming Advanced | پنجشنبه 13:00 تا 18:00 | 04-04-12 | 60 | 104,000,000 93,600,000 | |||
| 21 | (آنلاین) Python Web Development With Django | جمعه 13:00 تا 18:00 | 04-04-06 | 50 | 59,000,000 48,970,000 | |||
| 22 | Python Web Development With Django | جمعه 13:00 تا 18:00 | 04-04-06 | 50 | 74,000,000 64,380,000 | |||
| 23 | Data Analysis with Python (آنلاین) | جمعه 08:00 تا 13:00 | 04-04-20 | 30 | 33,000,000 26,400,000 | |||
| 24 | Data Analysis with Python | جمعه 08:00 تا 13:00 | 04-04-20 | 30 | 41,000,000 32,800,000 | |||
| 25 | Data Analysis with Python (آنلاین) | جمعه 13:00 تا 18:00 | 04-05-17 | 30 | 33,000,000 26,400,000 | |||
| 26 | Data Analysis with Python | جمعه 13:00 تا 18:00 | 04-05-17 | 30 | 41,000,000 32,800,000 | |||
| 27 | Machine Learning with Python | پنجشنبه 08:00 تا 13:00 | 04-04-26 | 50 | 69,000,000 58,650,000 | |||
| 28 | بهینه سازی برای موتورهای جست و جو - SEO | پنجشنبه 16:00 تا 20:00 | 04-04-05 | 40 | 83,000,000 73,040,000 | |||
| 29 | Deep Learning with Python | جمعه 08:00 تا 12:00 | 04-04-06 | 60 | 106,000,000 95,400,000 | |||
| 30 | دوره طراحی رابط و تجربه کاربری (UI/UX) | پنجشنبه 13:00 تا 17:00 | 04-03-29 | 40 | 59,000,000 48,970,000 | |||
| 31 | Wordpress & WooCommerce Essential Training | جمعه 13:00 تا 18:00 | 04-04-06 | 35 | 40,000,000 32,000,000 | |||
| 32 | C# Programming | یکشنبه, سه شنبه 17:30 تا 20:30 | 04-03-27 | 60 | 75,000,000 65,250,000 | |||
| 33 | C# Programming آنلاین | یکشنبه, سه شنبه 17:30 تا 20:30 | 04-03-27 | 60 | 61,000,000 51,240,000 | |||
| 34 | برنامه نویسی به زبان ++C | یکشنبه, سه شنبه 17:30 تا 20:30 | 04-04-15 | 60 | 61,000,000 51,240,000 | |||
| 35 | برنامه نویسی به زبان ++C آنلاین | یکشنبه, سه شنبه 17:30 تا 20:30 | 04-04-15 | 60 | 49,000,000 39,200,000 | |||
| 36 | PHP & MYSQL Web Development | شنبه, دوشنبه 17:30 تا 20:30 | 04-04-16 | 80 | 99,000,000 89,100,000 | |||
| 37 | Java SE8 Programming | جمعه 13:00 تا 18:00 | 04-04-06 | 50 | 68,000,000 58,480,000 | |||
| 38 | Android Pack | شنبه 17:00 تا 21:00 | 04-03-31 | 70 | 93,000,000 83,700,000 | |||
| 39 | SQL Server 2022 Database Development | جمعه 08:00 تا 13:00 | 04-03-23 | 60 | 75,000,000 65,250,000 | |||
| 40 | SQL Server 2022 Database Development آنلاین | جمعه 08:00 تا 13:00 | 04-03-23 | 60 | 64,000,000 54,400,000 | |||
| 41 | Microsoft ASP.net MVC | پنجشنبه 13:00 تا 18:00 | 04-04-05 | 60 | 115,000,000 104,650,000 | |||