آموزش انیمیشن SVG را با HTML، CSS و جاوا اسکریپت یاد بگیرید

دانلود Learn SVG Animation- With HTML, CSS & Javascript

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

در این دوره ما قصد داریم از همان ابتدا SVG را یاد بگیریم، اگر شما طراح وب هستید، برای یک توسعه دهنده front-end و اگر می خواهید مهارت خود را افزایش دهید، این بهترین دوره در این زمینه خواهد بود.

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

ما قرار است این دوره را از ابتدایی شروع کنیم و سپس به بخش پیشرفته می‌رویم.

من یک به یک پروژه انیمیشن SVG بسیار پیشرفته را پوشش خواهم داد.

بنابراین شما هیچ دانشی در مورد SVG ندارید، خوش آمدید

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

  • برای طراحان وب و توسعه دهندگان فرانت اند.

  • باید قبلا از HTML/CSS استفاده می کرد.

  • دانش‌آموزانی که می‌خواهند انیمیشن‌های SVG خود را بهبود بخشند و تکنیک‌های جدید را امتحان می‌کنند اما نمی‌دانند.

الزامات

  1. هر ویرایشگر متنی (ویرایشگر کد ویژوال استودیو توصیه می شود).

  2. اگر از هر نرم افزار گرافیک برداری مانند Illustrator دانش دارید، سود زیادی می بردید اما نیازی به آن نیست.

  3. شما باید تجربه کمی با HTML و CSS داشته باشید.

آنچه خواهید آموخت

  1. SVG را از مبتدی تا پیشرفته کامل کنید،

  2. انیمیشن پیشرفته SVG و طراحی رابط کاربری،

  3. نشان‌واره و نماد متحرک SVG


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

درس ها Lessons

  • فیلتر SVG feConvolveMatrix SVG feConvolveMatrix Filter

  • آموزش عناصر متنی SVG SVG Text Element Tutorial

  • آموزش SVG ViewPort و ViewBox SVG ViewPort & ViewBox Tutorial

  • انیمیشن ترکیب مجدد نقشه Svg Svg map reuniting animation

  • فیلتر feComposite SVG SVG feComposite Filter

  • فیلتر SVG feDiffuseLighting SVG feDiffuseLighting Filter

  • آموزش SVG Ellipse Element SVG Ellipse Element Tutorial

  • فیلتر SVG feDisplacementMap SVG feDisplacementMap Filter

  • گرادیان های خطی SVG SVG linear Gradients

  • انیمیشن ماشین متحرک Moving car Animation

  • فیلتر SVG feturbulence SVG feTurbulence Filter

  • انیمیشن متن موج دار 90p بهبود یافته است Wavy text animation enhanced 90p

  • SVG Defs، Symbol & Use Elements SVG Defs, Symbol & Use Elements

  • معرفی Svg Svg introduction

  • پوشش متن SVG با ویدئو SVG Text Masking with Video

  • SVG را در HTML قرار دهید Include SVG in HTML

  • فیلتر SVG چیست؟ What are SVG filter

  • انتقال FeComponent FeComponentTransfer

  • انیمیشن لودر SVG SVG Loader Animation

  • آموزش عنصر مسیر SVG SVG Path Element Tutorial

  • آموزش SVG Rect Element SVG Rect Element Tutorial

  • انیمیشن Svg ClipPath Svg ClipPath animation

  • آموزش SVG Path Element قسمت 2 SVG Path Element Tutorial part 2

  • اجرای فیلتر SVG SVG Filter implementation

  • آموزش SVG Stroke Properties SVG Stroke Properties Tutorial

  • آموزش عنصر تصویر SVG SVG Image Element Tutorial

  • اسکرول طراحی Scroll Drawing

  • تلاطم و جابجایی تصویر قسمت 2 Image Turbulence & Displacement Part 2

  • انیمیشن بسته بندی عنوان Svg Svg title wrapping animation

  • گرادیان های شعاعی SVG SVG radial Gradients

  • آموزش SVG Line Element SVG Line Element Tutorial

  • آموزش SVG Path Element قسمت 3 SVG Path Element Tutorial part 3

  • تلاطم و جابجایی تصویر قسمت 1 Image Turbulence & Displacement Part 1

  • انیمیشن ردیابی مسیر Svg Svg path tracking animation

  • آموزش SVG Circle Element SVG Circle Element Tutorial

  • آموزش SVG Grouping Elements SVG Grouping Elements Tutorial

  • Adobe illustrator به svg Adobe illustrator to svg

  • آموزش SVG Fill Properties SVG Fill Properties Tutorial

  • آموزش SVG Polygon Element SVG Polygon Element Tutorial

  • فیلتر SVG feColorMatrix SVG feColorMatrix Filter

  • آموزش SVG TextPath Element SVG TextPath Element Tutorial

  • آموزش SVG Polyline Element SVG Polyline Element Tutorial

  • افزودن جاوا اسکریپت در تصویر svg Adding JavaScript in svg image

نمایش نظرات

آموزش انیمیشن SVG را با HTML، CSS و جاوا اسکریپت یاد بگیرید
جزییات دوره
4h 58m
43
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
- از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Jayanta Sarkar Jayanta Sarkar

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

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

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