کانال تلگرام پشتیبانی تلگرام شماره تماس پشتیبانی: 0930 395 3766
ورود ثبت نام

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

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

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

آموزش جامع SVG: از مبتدی تا پیشرفته با انیمیشن و طراحی UI

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

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

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

حتی اگر هیچ دانشی در مورد SVG ندارید، باز هم خوش آمدید!

مخاطبین این دوره:

  • طراحان وب و توسعه‌دهندگان فرانت‌اند
  • افرادی که قبلاً از HTML/CSS استفاده کرده‌اند
  • دانشجویانی که می‌خواهند انیمیشن‌های SVG خود را بهبود بخشند و تکنیک‌های جدید را امتحان کنند، اما نمی‌دانند چگونه

پیش‌نیازها:

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

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

  1. آموزش کامل SVG از مبتدی تا پیشرفته
  2. انیمیشن SVG پیشرفته و طراحی UI
  3. ساخت لوگو و آیکون متحرک SVG
  4. ساخت انیمیشن های پیچیده با SVG و Javascript
  5. فیلترهای SVG

در عرض چند ساعت، پروژه‌های SVG متعددی را با استفاده از تکنیک‌های مختلف انیمیشن ایجاد خواهید کرد.

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

مقدمه Introduction

  • معرفی SVG SVG Introduction

  • کدام یک از موارد زیر در مورد SVG صحیح است؟ Which of the following is true about SVG?

گنجاندن SVG در HTML Include SVG in HTML

  • گنجاندن SVG در HTML Include SVG in HTML

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

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

آموزش عنصر SVG Line SVG Line Element Tutorial

  • آموزش عنصر SVG Line SVG Line Element Tutorial

آموزش عنصر SVG Rect SVG Rect Element Tutorial

  • آموزش عنصر SVG Rect SVG Rect Element Tutorial

آموزش عنصر SVG Circle SVG Circle Element Tutorial

  • آموزش عنصر SVG Circle SVG Circle Element Tutorial

آموزش عنصر SVG Ellipse SVG Ellipse Element Tutorial

  • آموزش عنصر SVG Ellipse SVG Ellipse Element Tutorial

آموزش عنصر SVG Polyline SVG Polyline Element Tutorial

  • آموزش عنصر SVG Polyline SVG Polyline Element Tutorial

آموزش عنصر SVG Polygon SVG Polygon Element Tutorial

  • آموزش عنصر SVG Polygon SVG Polygon Element Tutorial

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

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

  • آموزش عنصر SVG Path - قسمت دوم SVG Path Element Tutorial - II

  • آموزش عنصر SVG Path - قسمت سوم SVG Path Element Tutorial - III

آموزش عنصر SVG Text SVG Text Element Tutorial

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

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

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

آموزش ویژگی‌های SVG Stroke SVG Stroke Properties Tutorial

  • آموزش ویژگی‌های SVG Stroke SVG Stroke Properties Tutorial

آموزش ویژگی‌های SVG Fill SVG Fill Properties Tutorial

  • آموزش ویژگی‌های SVG Fill SVG Fill Properties Tutorial

آموزش عناصر گروه‌بندی SVG SVG Grouping Elements Tutorial

  • آموزش عناصر گروه‌بندی SVG SVG Grouping Elements Tutorial

آموزش عناصر SVG Defs, Symbol & Use SVG Defs, Symbol & Use Elements Tutorial

  • آموزش عناصر SVG Defs, Symbol & Use SVG Defs, Symbol & Use Elements Tutorial

آموزش عنصر SVG TextPath SVG TextPath Element Tutorial

  • آموزش عنصر SVG TextPath SVG TextPath Element Tutorial

آموزش عنصر SVG Gradients SVG Gradients Element Tutorial

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

  • گرادیان شعاعی SVG SVG Radial Gradient

تبدیل Adobe illustrator به گرافیک SVG Adobe illustrator to SVG Graphic

  • تبدیل adobe illustrator به SVG adobe illustrator to SVG

آموزش عنصر SVG ClipPath SVG ClipPath Element Tutorial

  • آموزش عنصر SVG ClipPath SVG ClipPath Element Tutorial

فیلتر SVG SVG Filter

  • مقدمه فیلتر SVG SVG Filter Intro

  • پیاده سازی فیلتر SVG SVG Filter implementation

  • فیلترهای SVG - feColorMatrix SVG Filters feColorMatrix

  • فیلترهای SVG - feComponentTransfer SVG Filters feComponentTransfer

  • فیلتر SVG - feComposite SVG Filter feComposite

  • فیلترهای SVG - feConvolveMatrix SVG Filters feConvolveMatrix

  • فیلترهای SVG - feDiffuseLighting SVG Filters feDiffuseLighting

  • فیلترهای SVG - feDisplacementMap SVG Filters feDisplacementMap

  • فیلترهای SVG - feTurbulence SVG Filters feTurbulence

اضافه کردن جاوا اسکریپت به تصویر SVG Adding JavaScript in svg image

  • اضافه کردن جاوا اسکریپت به تصویر SVG Adding JavaScript in svg image

پروژه 1 Project 1

  • انیمیشن Stroke SVG با CSS SVG Stroke Animation With CSS

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

پروژه 2 Project 2

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

  • ایجاد شکل با انیمیشن خط stroke Create shape with line stroke animation

پروژه 3 - جلوه‌های انیمیشن خط الاستیک SVG Project 3 -SVG Elastic Line Animation Effects

  • جلوه‌های انیمیشن خط الاستیک SVG SVG Elastic Line Animation Effects

پروژه 4 - انیمیشن عنوان‌بندی SVG Project 4 - svg title wrapping animation

  • پروژه 4 - انیمیشن عنوان‌بندی SVG Project 4 - svg title wrapping animation

پروژه 5 - انیمیشن شناور سه بعدی با استفاده از SVG Project 5 - 3D Hover Animation Using SVG

  • انیمیشن متن مواج Wavy text animation

  • انیمیشن شناور سه بعدی با استفاده از SVG 3D Hover Animation Using SVG

پروژه 6 - ماسک کردن متن SVG با ویدیو Project 6 - SVG Text Masking with Video

  • ماسک کردن متن SVG با ویدیو SVG Text Masking with Video

پروژه 7 - لودرهای صفحه SVG Project 7 - SVG Page Loaders

  • لودر 1 Loader 1

پروژه 8 - طراحی اسکرول SVG Project 8 - SVG Scroll Drawing

  • برای رسم یک ستاره، این پنجره را به پایین اسکرول کنید. Scroll down this window to draw a Star.

پروژه 9 - تلاطم و جابجایی تصویر Project 9 - Image Turbulence & Displacement

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

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

پروژه 10 - انیمیشن پیوستن مجدد نقشه SVG Project 10 -SVG map reuniting animation

  • انیمیشن پیوستن مجدد نقشه svg svg map reuniting animation

آموزش چگونه جلوی به تعویق انداختن کار را بگیریم

آموزش چگونه جلوی به تعویق انداختن کار را بگیریم

How To Stop Procrastinating

آموزش نحوه یادگیری هر زبانی- Learning Language 101

آموزش نحوه یادگیری هر زبانی- Learning Language 101

How to learn any language- Language Learning 101

آموزش Azure SQL Data Warehouse: Query Performance Tuning

آموزش Azure SQL Data Warehouse: Query Performance Tuning

Azure SQL Data Warehouse: Query Performance Tuning

نمایش نظرات

آموزش انیمیشن و فیلتر SVG با HTML، CSS و جاوا اسکریپت
جزییات دوره
5.5 hours
47
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
3,533
4.4 از 5
دارد
دارد
دارد

https://donyad.com/d/4a8345

جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Jayanta Sarkar Jayanta Sarkar

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

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

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