انیمیشن CSS و GSAP: سفر مبتدی تا پیشرفته

CSS and GSAP Animation: Beginner to Advanced journey

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:

با "CSS و GSAP Animation: Beginner to Advanced Journey" وارد دنیای پویا انیمیشن های وب شوید. این دوره جامع طراحی شده است تا شما را از یک مبتدی به یک انیماتور ماهر برساند و شما را با ابزارها و دانشی برای ایجاد انیمیشن های خیره کننده و حرفه ای برای وب سایت ها و برنامه های کاربردی تحت وب مجهز کند.

نکات برجسته دوره:

  • مبانی انیمیشن های CSS:

    • مقدمه ای بر انیمیشن ها و انتقال های CSS

    • انیمیشن‌های فریم کلیدی و عملکردهای زمان‌بندی

    • مثال‌های عملی و تمرین‌های عملی برای افزایش اعتماد به نفس شما

  • تکنیک های پیشرفته CSS:

    • تسلط بر تبدیل ها و انیمیشن های سه بعدی

    • استفاده از شبه عناصر و متغیرهای CSS برای جلوه‌های پویا

    • ایجاد انیمیشن‌های واکنش‌گرا که با دستگاه‌ها و اندازه‌های مختلف صفحه سازگار هستند

  • مقدمه ای بر GSAP (سکوی انیمیشن GreenSock):

    • نمای کلی GSAP و مفاهیم اصلی آن

    • راه اندازی و ادغام GSAP در پروژه های شما

    • انیمیشن های پایه با TweenLite و TweenMax GSAP

    • ایجاد انیمیشن های مبتنی بر جدول زمانی با TimelineLite و TimelineMax

  • انیمیشن های تعاملی:

    • متحرک سازی در اسکرول، شناور، و سایر تعاملات کاربر

    • استفاده از پلاگین های GSAP برای جلوه های پیشرفته (ScrollTrigger، Draggable و غیره)

    • ایجاد تجارب وب تعاملی و جذاب

  • پروژه های دنیای واقعی:

    • توضیحات گام به گام پروژه های انیمیشن دنیای واقعی

    • بهترین شیوه ها برای ساختاردهی و سازماندهی کد انیمیشن

    • نکات و ترفندهای متخصصان صنعت برای ارتقای مهارت های انیمیشن شما

چه کسی باید یاد بگیرد:

  • مبتدیان: اگر در زمینه توسعه وب یا انیمیشن تازه کار هستید، این دوره پایه محکمی را ارائه می دهد و به تدریج مهارت های شما را تقویت می کند.

  • توسعه دهندگان متوسط: دانش موجود خود را از CSS تقویت کنید و قابلیت های قدرتمند GSAP را برای ایجاد انیمیشن های پیچیده تر بررسی کنید.

  • طراحان: بیاموزید که چگونه با انیمیشن های تعاملی و جذاب به طرح های خود جان بخشید.

نتایج دوره:

در پایان این دوره، شما:

  • درکی عمیق از انیمیشن های CSS و تکنیک های پیشرفته داشته باشید

  • در استفاده از GSAP برای ایجاد انیمیشن های پیچیده مهارت داشته باشید

  • می‌توانید انیمیشن‌های واکنش‌گرا و بهینه‌سازی عملکرد را پیاده‌سازی کنید

  • مجموعه ای از انیمیشن های وب خیره کننده برای نشان دادن مهارت های خود داشته باشید

در این سفر هیجان انگیز به ما بپیوندید تا بر هنر انیمیشن های وب مسلط شوید و صفحات وب استاتیک خود را به تجربه هایی پویا و از نظر بصری جذاب تبدیل کنید!


سرفصل ها و درس ها

درس ها Lessons

  • CSS Transform 2D Scale CSS Transform 2D Scale

  • CSS بارگذاری انیمیشن CSS Loading Animation

  • آموزش فیلتر CSS قسمت دوم CSS Filter Tutorial Part two

  • آموزش تابع زمان بندی انتقال CSS CSS Transition Timing Function Tutorial

  • جلوه های شناور تصویر سه بعدی CSS CSS 3d Layered Image Hover Effects

  • آموزش تاخیر انتقال CSS CSS Transition Delay Tutorial

  • آموزش انیمیشن CSS قسمت دوم CSS Animation Tutorial Part Two

  • CSS 3D Flip on Hover Pure CSS3 3D Button Hover Effects CSS 3D Flip on Hover Pure CSS3 3D Button Hover Effects

  • CSS Transform 2D Intro CSS Transform 2D Intro

  • CSS Transform 2D Skew CSS Transform 2D Skew

  • مقیاس آموزشی CSS Transform 3D CSS Transform 3D Tutorial Scale

  • جدول زمانی در GSAP اولین خط زمانی خود را ایجاد کنید Timeline in GSAP Create Your First Timeline

  • آموزش CSS Transform 3D CSS Transform 3D Tutorial

  • دکمه پیوند متحرک CSS CSS Animated Link Button

  • CSS Transform 2D Matrix CSS Transform 2D Matrix

  • آموزش CSS Animation Fill Mode CSS Animation Fill Mode Tutorial

  • انیمیشن ابر بارانی قسمت دوم Animated rainy cloud part Two

  • آموزش CSS Animation Play State Mode CSS Animation Play State Mode Tutorial

  • آموزش انیمیشن CSS قسمت اول CSS Animation Tutorial Part One

  • آموزش انتقال CSS CSS Transition Tutorial

  • معرفی و پیاده سازی انیمیشن GSAP Introduction and implementation GSAP animation

  • آموزش CSS Transform Style CSS Transform Style Tutorial

  • معرفی دوره Course Introduction

  • چشمان متحرک نشانگر ماوس را دنبال کنید Animated Eyes Follow Mouse Cursor

  • معرفی و پیاده سازی انیمیشن GSAP قسمت دوم Introduction and implementation GSAP animation part Two

  • ایجاد طرح های متحرک جدول زمانی Create Animated Timeline Designs

  • متن متحرک قابل ویرایش Editable animated text

  • انیمیشن ابر بارانی قسمت اول Animated rainy cloud part One

  • آموزش CSS Perspective CSS Perspective Tutorial

  • CSS Backface Visibility Tutorial CSS Backface Visibility Tutorial

  • جلوه های انیمیشن CSS 3D Wavy Circle Loader CSS 3D Wavy Circle Loader Animation Effects

  • جلوه های انیمیشن چرخش سه بعدی CSS3 CSS3 3D Rotation Animation Effects

  • CSS Transform 3D Tutorial Translate CSS Transform 3D Tutorial Translate

  • آموزش فیلتر CSS قسمت اول CSS Filter Tutorial Part One

نمایش نظرات

انیمیشن CSS و GSAP: سفر مبتدی تا پیشرفته
جزییات دوره
4h 42m
34
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
1
- از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Jayanta Sarkar Jayanta Sarkar

سلام، من جایانتا هستم.

پس از فارغ التحصیلی و اخذ مدرک در رشته "فناوری اطلاعات"، حرفه حرفه ای من آغاز شد، شروع به توسعه وب و حرفه طراحی گرافیک در سال 2018، من هرگز از یادگیری مهارت های برنامه نویسی جدید دست نکشیدم.

من مهارت های توسعه وب و طراحی گرافیک را در آرنا انیمیشن می آموزم. اما بیشتر مهارت های من مهارت های خودآموز است. به‌عنوان یک توسعه‌دهنده و طراح گرافیک خودآموخته، این شانس را داشتم که با معنی شرکت‌های فناوری اطلاعات محلی کار کنم تا وب‌سایت‌هایشان را بسازم و کارمندانشان را در زمینه برنامه‌نویسی وب آموزش دهم.