دوره آموزشی

دوبله زبان فارسی

تسلط به GSAP و انیمیشن CSS با SVG

Name: تسلط به GSAP و انیمیشن CSS با SVG
Price: 16450000 IRR
Availability: InStock
Author: AI Academy

معرفی
سرفصل

✅ سرفصل و جزئیات آموزش

آنچه یاد خواهید گرفت:

یادگیری کامل SVG از مبتدی تا پیشرفته
المان‌های SVG
لوگو و آیکون انیمیشنی SVG
فیلترهای SVG
تسلط به انیمیشن‌ها، ترنزیشن‌ها و ترنسفورم‌های CSS
انیمیشن سه بعدی CSS
آموزش افکت‌های انیمیشن CSS Keyframe
ترنزیشن css، انیمیشن css، هاور css، انیمیشن هاور css، افکت‌های ترنزیشن هاور css، افکت‌های تصویری css، افکت‌های css3، نمونه‌های انیمیشن css
انیمیشن Gsap

پیش‌نیازهای دوره

اگر با نرم‌افزارهای گرافیک برداری مانند Illustrator آشنایی داشته باشید، بسیار مفید خواهد بود اما الزامی نیست.
باید تجربه کمی با HTML و CSS داشته باشید
هر ویرایشگر متنی (Visual Studio Code توصیه می‌شود)
یک اتصال اینترنت

توضیحات دوره

در یک سفر غرق‌کننده در دنیای انیمیشن CSS با SVG (گرافیک برداری مقیاس‌پذیر) همراه شوید. در این دوره جامع، یاد خواهید گرفت که چگونه از قدرت CSS و SVG برای ایجاد تجربیات وب جذاب، تعاملی و پویا استفاده کنید.

دوره مبانی انیمیشن CSS و SVG طراحی شده است تا درکی جامع از ایجاد انیمیشن‌های وب پویا و جذاب با استفاده از CSS و SVG به دانشجویان ارائه دهد. این دوره برای توسعه‌دهندگان وب در سطوح مبتدی و متوسط که می‌خواهند مهارت‌های خود را در ایجاد انیمیشن‌های جذاب ارتقا دهند، مناسب است.

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

موضوعات کلیدی تحت پوشش:

مقدمه‌ای بر انیمیشن CSS و SVG: درک مبانی انیمیشن و نقش CSS و SVG در ایجاد محتوای وب پویا.
مبانی انیمیشن CSS: بررسی CSS keyframes، transitions و transforms برای ایجاد انیمیشن‌های ساده.
انیمیشن پیشرفته CSS: غواصی عمیق‌تر در تکنیک‌های پیشرفته مانند توابع زمان‌بندی انیمیشن، ویژگی‌های انیمیشن و بهینه‌سازی عملکرد انیمیشن.
ملزومات انیمیشن SVG: یادگیری مبانی SVG، شامل شکل‌ها، مسیرها (paths)، گرادیان‌ها و فیلترها.
انیمیشن پیشرفته SVG: بهره‌گیری از قدرت SVG برای ایجاد انیمیشن‌های پیچیده و تعاملی، شامل مورفینگ، ماسک‌گذاری و انیمیشن‌های واکنش‌گرا
تلفیق انیمیشن CSS و SVG: ترکیب تکنیک‌های انیمیشن CSS و SVG برای ایجاد انیمیشن‌های وب یکپارچه و بصری خیره‌کننده
انیمیشن‌های واکنش‌گرا و سازگاری با مرورگر: درک اهمیت طراحی واکنش‌گرا و اطمینان از اجرای روان انیمیشن‌ها در دستگاه‌ها و مرورگرهای مختلف

مزایای دوره:

در پایان دوره، دانشجویان به بنیادی قوی در انیمیشن CSS و SVG دست خواهند یافت که آن‌ها را قادر می‌سازد تا:

انیمیشن‌های وب تعاملی و جذاب بصری با استفاده از CSS و SVG ایجاد کنند.
اصول و تکنیک‌های پشت طراحی انیمیشن مؤثر را درک کنند.
انیمیشن‌ها را برای عملکرد و سازگاری با مرورگر بهینه‌سازی کنند.
کتابخانه‌ها و فریم‌ورک‌های انیمیشن را در پروژه‌های خود بگنجانند.
تجربه کاربری را با افزودن انیمیشن‌های تعاملی به وب‌سایت‌ها و اپلیکیشن‌های وب ارتقا دهند.

پیش‌نیازها:

این دوره فرض را بر درک اولیه HTML، CSS و JavaScript می‌گذارد. آشنایی با مفاهیم توسعه وب و تجربه در ساخت صفحات وب مفید خواهد بود اما اجباری نیست.

به دوره مبانی انیمیشن CSS و SVG بپیوندید و مهارت‌های توسعه وب خود را به سطح بعدی ببرید. خلاقیت خود را آزاد کنید و مخاطبان خود را با انیمیشن‌های خیره‌کننده مجذوب کنید.

این دوره برای چه کسانی مناسب است؟

توسعه‌دهندگان فرانت‌اند
طراحان وب‌سایت
توسعه‌دهندگان CSS
طراحان UX/UI

تسلط به GSAP و انیمیشن CSS با SVG

فصل 1: مقدمه

آموزش مقدماتی SVG 04:12
کدام یک از موارد زیر درباره SVG صحیح است؟ None

فصل 2: آموزش گنجاندن SVG در HTML و CSS

آموزش گنجاندن SVG در HTML و CSS 06:35

فصل 3: آموزش SVG ViewPort و ViewBox

آموزش SVG ViewPort و ViewBox 08:46

فصل 4: المان‌های SVG

آموزش المان Line در SVG 05:33
رسم یک X بزرگ. که در واقع فقط دو خط متقاطع هستند None
آموزش المان Rect در SVG 05:21
آموزش المان Circle در SVG 02:54
آموزش المان Ellipse در SVG 02:54
آموزش المان Polyline در SVG 04:35
آموزش المان Polygon در SVG 02:49

فصل 5: آموزش المان SVG Path

آموزش المان Path در SVG - بخش 1 06:15
آموزش المان Path در SVG - بخش 2 09:57
آموزش المان Path در SVG - بخش 3 07:17

فصل 6: آموزش المان‌های متن و تصویر SVG

آموزش المان Text در SVG 08:22
آموزش المان Image در SVG 04:11

فصل 7: آموزش ویژگی های SVG

آموزش ویژگی‌های Stroke در SVG 11:22
آموزش ویژگی‌های Fill در SVG 03:46
آموزش گروه‌بندی المان‌ها در SVG 03:04
آموزش المان‌های Defs، Symbol و Use در SVG 06:19
آموزش المان TextPath در SVG 04:38
آموزش المان گرادیان خطی در SVG 07:34
گرادیان شعاعی در SVG 07:42

فصل 8: تبدیل Adobe Illustrator به گرافیک SVG

تبدیل Adobe Illustrator به گرافیک SVG 10:30
آموزش المان ClipPath در SVG 05:09

فصل 9: فیلتر SVG

مقدمه‌ای بر فیلترهای SVG 03:23
پیاده‌سازی فیلتر SVG 06:30
فیلترهای SVG: feColorMatrix 09:58
فیلترهای SVG: feComponentTransfer 04:13
فیلتر SVG: feComposite 06:20
فیلترهای SVG: feConvolveMatrix 09:19
فیلترهای SVG: feDiffuseLighting 12:24
فیلترهای SVG: feDisplacementMap 10:48

فصل 10: افزودن JavaScript در تصویر SVG

افزودن JavaScript در تصویر SVG 04:33

فصل 11: آموزش فیلتر CSS

آموزش فیلتر CSS 06:40
آموزش فیلتر CSS بخش 2 05:16

فصل 12: آموزش CSS Transition

آموزش CSS Transition 07:21
آموزش تابع زمان‌بندی در CSS Transition 07:48
آموزش تاخیر در CSS Transition 03:25

فصل 13: CSS Transform دو بعدی

مقدمه‌ای بر CSS Transform دو بعدی 05:23
CSS Transform دو بعدی: Scale 03:49
CSS Transform دو بعدی: Skew 07:06
CSS Transform دو بعدی: Matrix 04:30

فصل 14: آموزش CSS Transform سه بعدی

آموزش CSS Transform سه بعدی 10:26
آموزش CSS Transform سه بعدی: Translate 04:11
آموزش CSS Transform سه بعدی: Scale 03:47

فصل 15: آموزش CSS Perspective

آموزش CSS Perspective 07:47

فصل 16: آموزش CSS Transform-Style

آموزش CSS Transform-Style 04:54

فصل 17: آموزش CSS Backface-Visibility

آموزش CSS Backface-Visibility 03:42

فصل 18: آموزش انیمیشن CSS

انیمیشن CSS با Keyframe 11:40
ویژگی animation-fill-mode در CSS 06:18
تعداد تکرار انیمیشن 04:28

فصل 19: انیمیشن GSAP

انیمیشن GSAP چیست؟ 05:21
پیاده‌سازی انیمیشن GSAP 13:30
ویژگی‌ها و متدهای انیمیشن GSAP 13:37
تایم‌لاین در GSAP: ساخت اولین تایم‌لاین 15:07
نحوه استفاده از Scroll Trigger 24:00
استفاده از Scroll Trigger برای چند انیمیشن و ویژگی Scrub 12:16
استفاده از Scroll Trigger با Pin 13:44
انیمیشن GSAP با گرافیک SVG 10:49
المان Path در SVG 11:01
ساخت انیمیشن‌های SVG جذاب 10:45

فصل 20: پروژه‌های SVG

پروژه 1: انیمیشن Stroke در SVG با CSS 10:19
پروژه 2: ساخت شکل با انیمیشن Line Stroke 10:14
پروژه 3: افکت‌های انیمیشن خط الاستیک SVG 08:52
پروژه 4: انیمیشن Wrapping عنوان SVG 09:16
پروژه 5: انیمیشن متن موج‌دار 08:48
پروژه 6: انیمیشن لودر سریع SVG 07:48
پروژه 7: انیمیشن هاور سه بعدی SVG 09:44
پروژه 8: انیمیشن ردیابی مسیر SVG 07:17
پروژه 9: لودرهای SVG 08:45
پروژه 10: نقاشی با اسکرول 09:03
پروژه 11: افکت پیوستن نقشه SVG 04:41

فصل 21: پروژه انیمیشن CSS

انیمیشن رانندگی ماشین 08:47
پروژه 1: دکمه لینک انیمیشنی CSS 08:33
پروژه 2: چرخش سه بعدی CSS در هاور - افکت‌های هاور دکمه سه بعدی با CSS3 خالص 12:11
پروژه 3: متن انیمیشنی قابل ویرایش 12:14
پروژه 4: چشم‌های انیمیشنی دنبال‌کننده نشانگر ماوس 12:09
پروژه 5: افکت‌های انیمیشن لودر دایره‌ای موج‌دار سه بعدی CSS 13:10
پروژه 6: افکت‌های هاور تصویر لایه‌ای سه بعدی CSS 08:40
پروژه 7: افکت‌های انیمیشن چرخش سه بعدی CSS3 11:10