کتاب صوتی پروژه‌های عملی با GSAP: از هیرو سکشن تا گالری‌های متحرک

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

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

عنوان دوره: دوره پروژه‌های عملی با GSAP: از هیرو سکشن تا گالری‌های متحرک

موضوع کلی: برنامه نویسی

موضوع میانی: انیمیشن‌های وب (Web Animations)

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

• 1. مبانی HTML و CSS برای انیمیشن
• 2. مروری بر جاوااسکریپت و DOM
• 3. معرفی کتابخانه GSAP (GreenSock Animation Platform)
• 4. نصب و راه‌اندازی GSAP
• 5. ساختار کلی انیمیشن‌های GSAP: Timeline و Tween
• 6. آشنایی با متدهای اصلی Tween: to(), from(), fromTo()
• 7. کار با پراپرتی‌های CSS در GSAP: position, opacity, transform
• 8. انیمیشن‌های ساده CSS: fade-in, fade-out, slide-in
• 9. انیمیشن transform: translate, rotate, scale
• 10. کار با easing functions در GSAP
• 11. معرفی easing‌های پرکاربرد
• 12. ایجاد انیمیشن‌های سفارشی با easing
• 13. انیمیشن رنگ و پس‌زمینه
• 14. اصول کار با Timeline در GSAP
• 15. ایجاد سکانس‌های انیمیشنی با Timeline
• 16. کنترل timeline: play, pause, reverse, restart
• 17. افزودن تأخیر (delay) و مدت زمان (duration) به انیمیشن‌ها
• 18. همپوشانی (stagger) انیمیشن‌ها
• 19. استفاده از callbacks در GSAP: onComplete, onStart
• 20. بهینه‌سازی انیمیشن‌ها برای عملکرد بهتر
• 21. معرفی CSS Variables و استفاده از آن‌ها در GSAP
• 22. انیمیشن‌های پاسخگو (responsive) با GSAP
• 23. انیمیشن‌های متن: حروف، کلمات، و خطوط
• 24. انیمیشن لیست‌ها و منوها
• 25. انیمیشن‌های hover و interaction
• 26. ایجاد انیمیشن‌های کلیک
• 27. پروژه عملی: ایجاد یک هیرو سکشن (Hero Section) جذاب
• 28. طراحی هیرو سکشن با HTML و CSS
• 29. انیمیشن المان‌های هیرو سکشن با GSAP
• 30. اضافه کردن parallax effect به هیرو سکشن
• 31. بهبود تعامل‌پذیری هیرو سکشن
• 32. پروژه عملی: ساخت یک گالری تصاویر متحرک
• 33. ساختار گالری تصاویر با HTML و CSS
• 34. انیمیشن تغییر تصاویر با GSAP
• 35. افزودن افکت‌های transition به گالری
• 36. ایجاد کنترل‌های navigation برای گالری
• 37. بهینه‌سازی گالری برای موبایل
• 38. پروژه عملی: انیمیشن‌های اسکرول (Scroll Animations)
• 39. معرفی ScrollTrigger در GSAP
• 40. نصب و راه‌اندازی ScrollTrigger
• 41. انیمیشن‌های مبتنی بر اسکرول: reveal, fade-in, slide-in
• 42. ایجاد trigger points برای انیمیشن‌ها
• 43. تنظیم scrub و toggle actions برای ScrollTrigger
• 44. ایجاد انیمیشن‌های پارالاکس با ScrollTrigger
• 45. پروژه عملی: ساخت یک منوی ناوبری چسبان (Sticky Navigation)
• 46. طراحی منوی ناوبری با HTML و CSS
• 47. انیمیشن چسبیدن منو به بالای صفحه با GSAP و ScrollTrigger
• 48. افکت‌های انیمیشنی برای منو (ظهور و محو شدن، تغییر رنگ)
• 49. بهبود تعامل منو و صفحات
• 50. کار با ScrollTrigger و عناصر بزرگ صفحه
• 51. مدیریت انیمیشن‌های complex با ScrollTrigger
• 52. انیمیشن‌های واکنش‌گرا و سازگار با اندازه‌های مختلف صفحه
• 53. معرفی GSAP plugins (plugins)
• 54. استفاده از MotionPathPlugin در GSAP
• 55. انیمیشن مسیرهای حرکتی سفارشی
• 56. ایجاد افکت‌های جذاب برای المان‌های متحرک
• 57. پروژه عملی: طراحی و انیمیشن یک اینفوگرافیک
• 58. ساختار اینفوگرافیک با HTML و CSS
• 59. انیمیشن اجزای اینفوگرافیک با GSAP
• 60. ایجاد timeline های پیچیده برای اینفوگرافیک
• 61. افزودن تعامل با اینفوگرافیک (hover، کلیک)
• 62. بهینه‌سازی اینفوگرافیک برای تجربه کاربری بهتر
• 63. کار با SVGs در GSAP
• 64. انیمیشن SVGs: shape morphing, stroke animation
• 65. ساخت افکت‌های پیشرفته با SVGs و GSAP
• 66. انیمیشن‌های مبتنی بر داده (Data-Driven Animations)
• 67. فچ کردن داده‌ها از API و استفاده در انیمیشن‌ها
• 68. ایجاد انیمیشن‌های پویا با داده‌های دریافتی
• 69. استفاده از external libraries (مثلاً animejs, threejs) در GSAP
• 70. ادغام GSAP با React, Vue, Angular (مقدماتی)
• 71. آشنایی با مفاهیم React, Vue, Angular
• 72. تنظیم پروژه GSAP در React, Vue, Angular
• 73. پیاده‌سازی انیمیشن‌ها با GSAP در React, Vue, Angular
• 74. بهینه‌سازی عملکرد در React, Vue, Angular
• 75. دیباگ کردن (Debugging) انیمیشن‌های GSAP
• 76. ابزارهای دیباگ در مرورگر
• 77. رفع مشکلات رایج در انیمیشن‌ها
• 78. تست کردن انیمیشن‌ها
• 79. بهینه‌سازی عملکرد انیمیشن‌ها
• 80. اصول بهینه‌سازی کد GSAP
• 81. فشرده‌سازی کد و منابع
• 82. استفاده از lazy loading برای تصاویر و منابع
• 83. بهبود سرعت بارگذاری صفحه
• 84. استفاده از cache برای بهبود performance
• 85. انیمیشن‌های پیشرفته: پارالل اسکرول (parallel scroll)
• 86. انیمیشن‌های پیشرفته: افکت‌های متن پیشرفته
• 87. انیمیشن‌های پیشرفته: افکت‌های سه بعدی
• 88. کاربرد WebGL در GSAP
• 89. فریم‌ورک‌های CSS و GSAP
• 90. مفاهیم Accessibility در انیمیشن‌ها
• 91. بهبود دسترسی‌پذیری برای انیمیشن‌ها
• 92. نکات و ترفندهای پیشرفته GSAP
• 93. مدیریت پیچیدگی‌های Timeline
• 94. استفاده از GSAP در پروژه‌های بزرگ
• 95. امنیت در انیمیشن‌های وب
• 96. انیمیشن‌های متقابل با APIهای دستگاه
• 97. بررسی کتابخانه‌های جایگزین GSAP
• 98. آینده انیمیشن‌های وب
• 99. منابع آموزشی تکمیلی GSAP
• 100. جمع‌بندی و مرور کلی دوره