دوره 150 پروژه انیمیشن خلاقانه و پیشرفته CSS و JavaScript مجموعه‌ای منحصر به فرد از تمرین‌ها و پروژه‌های واقعی است که به صورت گام‌به‌گام شما را در مسیر طراحی و توسعه انیمیشن‌های مدرن وب همراهی می‌کند. هدف این دوره آن است که با تمرین‌های کاربردی و تنوع مثال‌ها، از سطوح ابتدایی تا پیشرفته مفاهیم اصلی CSS Animations، Transitions و همچنین تکنیک‌های JavaScript برای دستکاری DOM و خلق انیمیشن‌های پیچیده را از پایه تا حرفه‌ای بیاموزید.

در این دوره آموزشی، شما به شکل کاملاً عملی و پروژه‌محور با موارد زیر آشنا خواهید شد:

• مفاهیم پایه و پیشرفته CSS Keyframes و Transitions.
• طراحی جلوه‌های Hover متنوع با CSS3.
• ساخت انیمیشن‌های چندمرحله‌ای و پیچیده با استفاده از JavaScript.
• یکپارچه‌سازی SVG Animations و کار با کتابخانه‌هایی مانند GreenSock (GSAP).
• بهینه‌سازی عملکرد انیمیشن‌ها برای موبایل و دسکتاپ.
• ایجاد انیمیشن‌های واکنش‌گرا (Responsive) و دسترسی‌پذیر (Accessible).
• مدیریت زمان‌بندی (Timing Functions) و Ticker در JS.
• پیاده‌سازی انیمیشن‌های ورودی (Entry) و خروج (Exit) در SPAها.

• تجربه عملی: با پیاده‌سازی 150 پروژه متنوع، مهارت شما عمیق و کاربردی خواهد شد.
• رزومه قوی: پس از اتمام دوره، مجموعه‌ای از پروژه‌های واقعی در اختیار دارید تا به کارفرماها یا مشتریان ارائه کنید.
• خودآموز و انعطاف‌پذیر: امکان مطالعه در هر زمان و تکرار تمرین‌ها تا تسلط نهایی.
• پشتیبانی و منابع کمکی: کدهای نمونه، فایل‌های PSD/Sketch و لیست منابع تکمیلی.
• به‌روز بودن: بهره‌گیری از آخرین استانداردهای CSS و ابزارهای پیشرفته JS.

• آشنایی متوسط با HTML5 و CSS3.
• درک اولیه از جاوااسکریپت و مفاهیم DOM.
• نصب یک ویرایشگر کد (VSCode، Sublime Text یا مشابه).
• دانلود مرورگرهای مدرن (Chrome، Firefox و Edge) برای تست انیمیشن‌ها.

اگر آشنایی شما پایین‌تر از این موارد است، پیشنهاد می‌شود ابتدا دوره‌های مقدماتی HTML/CSS و JS را مطالعه کنید و سپس وارد این مجموعه پروژه‌ها شوید.

• بخش اول: مبانی انیمیشن در CSS – Transition و Animation
• بخش دوم: انیمیشن‌های تعاملی با Hover و Focus
• بخش سوم: طراحی Loaderها و Progress Barهای پیشرفته
• بخش چهارم: حرکت المان‌ها با JavaScript و requestAnimationFrame
• بخش پنجم: استفاده از کتابخانه GSAP برای انیمیشن‌های پیشرفته
• بخش ششم: انیمیشن‌های SVG و Canvas
• بخش هفتم: انیمیشن متن و تایپوگرافی پویا
• بخش هشتم: کار با Intersection Observer و انیمیشن ورودی در اسکرول
• بخش نهم: طراحی افکت‌های منو و ناوبری انیمیشنی
• بخش دهم: پروژه نهایی – ساخت یک صفحه فرود (Landing Page) انیمیشنی

در هر بخش از دوره، شما یک یا چند پروژه عملی خواهید ساخت. برخی از مثال‌های شاخص عبارتند از:

• افکت‌های جذاب Loading با دایره‌های متحرک و خطوط منحنی.
• کارت‌های تعاملی سه‌بعدی با CSS 3D Transforms.
• گالری تصویر پویا با اسکرول بی‌نهایت و انیمیشن ورود آیتم‌ها.
• نمایش نمودارهای متحرک (Charts) با Canvas و JavaScript.
• منوی متحرک کشویی با افکت Slide & Fade.
• ساخت انیمیشنچرخه‌ی بارگذاری (Loading Spinner) با SVG.
• پروژه نهایی: Landing Page شامل اسلایدر، منوی چسبان و افکت‌های Scroll Reveal.

هر پروژه با توضیحات کامل کد، فایل‌های آماده و چالش‌های تکمیلی ارائه شده تا شما بتوانید خلاقیت خود را گسترش دهید.