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

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

به دوره خوش آمدید Welcome To The Course

• معرفی و رئوس مطالب دوره Course Introduction & Outline

تنظیم گردش کار و ابزار برای پروژه دوره Workflow setup and tools for course project

• یک SVG ایجاد کنید و به کد دسترسی پیدا کنید Create an SVG and access the code

• کد را با OMGSVG بهینه کنید Optimise Code with OMGSVG

• شروع یک پروژه جدید در Codepen.io Starting a New Project on Codepen.io

پروژه SVG - متحرک کردن یک لوگو SVG Project - Animating a Logo

• مقدمه ای بر پروژه Introduction to Project

• ترسیم SVG Drawing The SVG

• ایجاد انیمیشن های خطی Create Line Animations

• محاسبه خط جاوا اسکریپت Javascript Line Calculation

• انیمیشن های نهایی را اضافه کنید Add Final Animations

ویژگی های انیمیشن Animation Properties

• انیمیشن میمون Monkey Animation

• انیمیشن های CSS - FROM/TO - با استفاده از درصدها CSS Animations - FROM/TO - Using Percentages

• مسیرهای انیمیشن خطی Line Animation Directions

پروژه انیمیشن متن ترسیم شده با دست Hand Drawn Text Animation Project

• متن SVG ایجاد کنید Create SVG Text

• جلوه نوشتن متن را متحرک کنید Animate Text Writing Effect

پروژه نمادهای اجتماعی Social Icons Project

• معرفی پروژه Project Introduction

• انیمیشن توییتر Twitter Animation

• انیمیشن یوتیوب Youtube Animation

• انیمیشن فیس بوک Facebook Animation

پوشش و گرادیان Masking & Gradients

• پروژه گرادیان Gradient Project

• استفاده از Texture's Using Texture's

• تکنیک ماسکینگ پیشرفته Advanced Masking Technique

دوره بسته Course Close

• تبریک و تشکر Congratulations & Thank You