دوره انیمیشن‌های CSS و JavaScript برای طراحی وب همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره انیمیشن‌های CSS و JavaScript برای طراحی وب

موضوع کلی: طراحی و گرافیک دیجیتال

موضوع میانی: طراحی گرافیک متحرک برای وب

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر انیمیشن در طراحی وب
• 2. مفاهیم پایه CSS برای انیمیشن
• 3. انتخابگرها و ویژگی‌های CSS برای انیمیشن
• 4. انتقال‌ها (Transitions) در CSS
• 5. تعریف و کاربرد Transitions
• 6. تنظیمات زمانی Transitions
• 7. توابع زمان‌بندی (Timing Functions) در Transitions
• 8. انتقال ویژگی‌های مختلف با CSS
• 9. ترکیب Transitions با یکدیگر
• 10. انیمیشن‌ها (Animations) در CSS
• 11. سینتکس @keyframes
• 12. تعریف فریم‌های کلیدی در انیمیشن
• 13. نام‌گذاری و اجرای انیمیشن‌ها
• 14. ویژگی animation-name
• 15. ویژگی animation-duration
• 16. ویژگی animation-timing-function
• 17. ویژگی animation-delay
• 18. ویژگی animation-iteration-count
• 19. ویژگی animation-direction
• 20. ویژگی animation-fill-mode
• 21. ویژگی animation-play-state
• 22. تکنیک‌های پیشرفته انیمیشن CSS
• 23. انیمیشن‌های پیچیده با چندین @keyframes
• 24. ترکیب انیمیشن‌ها و Transitions
• 25. انیمیشن‌های متنی با CSS
• 26. انیمیشن‌های پس‌زمینه با CSS
• 27. انیمیشن‌های اشکال هندسی با CSS
• 28. انیمیشن‌های رابط کاربری (UI Animations)
• 29. استفاده از CSS Variables در انیمیشن‌ها
• 30. انیمیشن‌های واکنش‌گرا (Responsive Animations)
• 31. انیمیشن‌های سه‌بعدی (3D Animations) در CSS
• 32. مقدمه‌ای بر JavaScript در انیمیشن
• 33. نقش JavaScript در انیمیشن‌های وب
• 34. انتخابگرهای DOM با JavaScript
• 35. دستکاری استایل‌ها با JavaScript
• 36. استفاده از `setInterval` و `setTimeout`
• 37. تکنیک‌های پایه‌ای انیمیشن با JavaScript
• 38. ایجاد انیمیشن‌های ساده با تغییر استایل
• 39. کنترل انیمیشن‌ها با JavaScript
• 40. توقف و شروع انیمیشن‌ها با JavaScript
• 41. تغییر پارامترهای انیمیشن در حین اجرا
• 42. کار با رویدادها (Events) در انیمیشن‌های JavaScript
• 43. انیمیشن‌های مبتنی بر Request Animation Frame
• 44. مقدمه‌ای بر `requestAnimationFrame`
• 45. مزایای `requestAnimationFrame` نسبت به `setTimeout`
• 46. نحوه استفاده از `requestAnimationFrame`
• 47. ایجاد لوپ انیمیشن با `requestAnimationFrame`
• 48. همگام‌سازی انیمیشن‌ها با نرخ فریم مرورگر
• 49. کتابخانه‌ها و فریم‌ورک‌های انیمیشن JavaScript
• 50. مقدمه‌ای بر فریم‌ورک‌های انیمیشن
• 51. معرفی GreenSock Animation Platform (GSAP)
• 52. مزایای استفاده از GSAP
• 53. دستورات اصلی GSAP
• 54. تنظیمات اولیه در GSAP
• 55. انیمیشن‌های ساده با GSAP
• 56. ترکیب انیمیشن‌ها در GSAP
• 57. تایم‌لاین‌ها (Timelines) در GSAP
• 58. کنترل پیشرفته انیمیشن‌ها با GSAP
• 59. انیمیشن‌های واکنش‌گرا با GSAP
• 60. انیمیشن‌های سه‌بعدی با GSAP
• 61. معرفی Anime.js
• 62. مزایای استفاده از Anime.js
• 63. دستورات اصلی Anime.js
• 64. تنظیمات اولیه در Anime.js
• 65. انیمیشن‌های ساده با Anime.js
• 66. ترکیب انیمیشن‌ها با Anime.js
• 67. کنترل پیشرفته انیمیشن‌ها با Anime.js
• 68. انیمیشن‌های واکنش‌گرا با Anime.js
• 69. انیمیشن‌های سه‌بعدی با Anime.js
• 70. استفاده از SVG در انیمیشن
• 71. مقدمه‌ای بر SVG
• 72. ترسیم اشکال در SVG
• 73. استفاده از CSS برای انیمیشن SVG
• 74. استفاده از JavaScript برای انیمیشن SVG
• 75. انیمیشن مسیرها (Path Animation) در SVG
• 76. انیمیشن عناصر SVG با GSAP
• 77. انیمیشن عناصر SVG با Anime.js
• 78. انیمیشن‌های مبتنی بر داده (Data-driven Animations)
• 79. مقدمه‌ای بر انیمیشن‌های مبتنی بر داده
• 80. استفاده از داده‌های JSON برای انیمیشن
• 81. نمایش نمودارها و گراف‌ها
• 82. انیمیشن‌های تعاملی با داده‌ها
• 83. اصول طراحی انیمیشن‌های مؤثر
• 84. اصول دوازده‌گانه انیمیشن دیزنی در وب
• 85. تایمینگ و فاصله‌گذاری (Timing and Spacing)
• 86. پیش‌بینی (Anticipation)
• 87. بروز (Staging)
• 88. حرکت مستقیم و حالت مخالف (Straight Ahead Action and Pose to Pose)
• 89. دنباله‌روی و هم‌پوشانی (Follow Through and Overlapping Action)
• 90. تسکین (Ease In/Ease Out)
• 91. قوس (Arcs)
• 92. حرکت اضافی (Secondary Action)
• 93. زمان‌بندی (Timing)
• 94. اغراق (Exaggeration)
• 95. طراحی خوب و استوری‌برد (Solid Drawing and Storyboarding)
• 96. جذابیت (Appeal)
• 97. بهینه‌سازی انیمیشن‌ها برای عملکرد
• 98. اهمیت عملکرد در انیمیشن‌های وب
• 99. تکنیک‌های بهینه‌سازی CSS انیمیشن
• 100. تکنیک‌های بهینه‌سازی JavaScript انیمیشن