آموزش جامع انیمیشن CSS و وب: راهنمای کامل با ۷۰ پروژه عملی - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• ساختار دوره course structure

فیلترها، ترنزیشن‌ها و پرسپکتیو در CSS CSS filter transition and prospective

• آموزش CSS Filter CSS Filter Tutorial

• آموزش CSS Transition بخش اول CSS Transition Tutorial part 1

• آموزش CSS Transition بخش دوم CSS Transition Tutorial part 2

• آموزش CSS Transition بخش سوم CSS Transition Tutorial part 3

• آموزش CSS Transform 2D بخش اول CSS Transform 2D Tutorial part 1

• آموزش CSS Transform 2D بخش دوم CSS Transform 2D Tutorial part 2

• آموزش CSS Transform 3D بخش اول CSS Transform 3D Tutorial part 1

• آموزش CSS Transform 3D بخش دوم CSS Transform 3D Tutorial part 2

• آموزش CSS Perspective CSS Perspective Tutorial

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

• آموزش CSS Backface Visibility CSS Backface-Visibility Tutorial

پروژه ۱۶ دکمه با ترنسفورم CSS 16 CSS Button transform project

• پروژه ۱: افکت دکمه چرخان خلاقانه با CSS project 1 : Creative rotating button effect using css

• پروژه ۲: افکت دکمه Swipe با CSS project 2 : swipe button effect using css

• پروژه ۳: افکت Hover دکمه project 3 : Button hover Effect

• پروژه ۴: افکت درخشش دکمه project 4 : button glowing effect

• پروژه ۵: دکمه با تغییر مقیاس متن با CSS project 5 : Text scaling button using CSS

• پروژه ۶: دکمه جابجایی دایره‌ای project 6 : Circular swapping button

• پروژه ۷: دکمه ۳ لایه چرخان Project 7: Rotating 3 layers button

• پروژه ۸: افکت دکمه ۳ دایره در پس‌زمینه بخش اول Project 8 : 3 circle to background button effect part 1

• پروژه ۸: افکت دکمه ۳ دایره در پس‌زمینه بخش دوم Project 8 : 3 circle to background button effect part 2

• پروژه ۹: افکت جدید Hover دکمه Project 9 : New button hover effect

• پروژه ۱۰: افکت دکمه Split شده بخش اول Project 10 : splited button effect part 1

• پروژه ۱۰: افکت دکمه Split شده بخش دوم Project 10 : splited button effect part 2

• پروژه ۱۱: افکت Hover جابجایی Border بخش اول Project 11: border swapping button hover effect part 1

• پروژه ۱۱: افکت Hover جابجایی Border بخش دوم Project 11: border swapping button hover effect part 2

• پروژه ۱۲: افکت خلاقانه رشد Border دکمه Project 12 : creative border growing button effect

• پروژه ۱۳: افکت چرخان حرف اول در دکمه Project 13: creative first letter rotating button effect

• پروژه ۱۴: افکت رشد چهارطرفه Border دکمه Project 14 : four border growing bottom effect

• پروژه ۱۵: افکت دکمه با دو برش Project 15: 2 cuts button effects

• پروژه ۱۶: چرخش سه بعدی CSS هنگام Hover Project 16 : CSS 3D Flip on Hover - Pure CSS3 3D Button Hover Effects

پروژه ۵ افکت منو با CSS Transition 5 menu effects with CSS transition Project

• پروژه ۱: منوی با Border در حال رشد Project 1 : Growing Border menu

• پروژه ۲: افکت منوی Border با پس‌زمینه Project 2 : border menu effect with background

• پروژه ۳: افکت Hover منو با تاخیر در Transition Project 3 : menu hover effect with transition delay

• پروژه ۴: منوی متحرک تمام صفحه Project 4 : full screen animated menu

• پروژه ۵: افکت Hover منوی عمودی Project 5 : vertical menu hover effect

پروژه‌های ۵ افکت تصویر با Transition 5 Image effect with transition projects

• پروژه ۱: انیمیشن Fade-in هنگام Hover روی تصویر Project 1 : fade in hover animation on image

• پروژه ۲: افکت Hover تصویر Project 2 : image hover effect

• پروژه ۳: پروژه Transition تصویر به صورت Slide Up Project 3 : slide up image transition project

• پروژه ۴: افکت Hover تصویر Split شده Project 4 : split image hover effect

• پروژه ۵: افکت‌های Hover تصویر لایه‌ای سه بعدی CSS Project 5 : CSS 3d Layered Image Hover Effects

انیمیشن CSS با Keyframe CSS animation with keyframe

• انیمیشن CSS با Keyframe CSS animation with keyframe

• حالت Fill Mode در انیمیشن CSS Css animation-fill-mode

• تعداد تکرار انیمیشن (Iteration Count) animation iteration count

• ویژگی جهت انیمیشن (Direction) animation Direction property

پروژه ۱۴ انیمیشن Keyframe در CSS 14 CSS keyframe animations project

• پروژه ۱: افکت لودینگ چرخان با انیمیشن CSS Project 1 : Rotationg loading effect using css animation

• پروژه ۲: انیمیشن ماشین در حال حرکت Project 2 : driving car animation

• پروژه ۳: افکت نورانی متن Project 3 : text Lighting Effect

• پروژه ۴: انیمیشن متن تکرار شونده Project 4 : text totar animation

• پروژه ۵: دکمه متحرک با CSS Animation Project 5 : animated button with css animation

• پروژه ۶: متن متحرک بازتابی قابل ویرایش Project 6 : editable reflecting animated text

• پروژه ۷: دکمه متحرک با CSS Animation Project 7 : animated button with CSS animation

• پروژه ۸: ماه خلاقانه Project 8 : Creative Moon

• پروژه ۹: افکت‌های انیمیشن لودر دایره‌ای موج‌دار سه بعدی Project 9 : CSS 3D Wavy Circle Loader Animation Effects

• پروژه ۱۰: افکت‌های انیمیشن چرخش سه بعدی CSS3 Project 10 : CSS3 3D Rotation Animation Effects

• پروژه ۱۱: ابر بارانی متحرک بخش اول Project 11 : animated rainy cloud part 1

• پروژه ۱۱: ابر بارانی متحرک بخش دوم Project 11 : animated rainy cloud part 2

• پروژه ۱۲: افکت‌های انیمیشن متن Loading Project 12 : CSS Loading... Text Animation Effects

• پروژه ۱۳: انیمیشن لودینگ دایره‌ای با نقاط درخشان Project 13 : glowing dot circle loading CSS animation

• پروژه ۱۴: انیمیشن توپ جهنده Project 14 : Jumping ball animation

پروژه ۵ انیمیشن Clip Path در CSS 5 Css Clip Path Animations Project

• نحوه رسم اشکال هندسی مختلف با Clip-path how to draw different geometric shape using clippath

• پروژه ۱: انیمیشن موج Clip path با CSS Project 1 : Clip path wave animation with CSS

• پروژه ۲: انیمیشن Hover متن با Clip path Project 2 : Clip path text hover animation

• پروژه ۳: انیمیشن متن سال نو با ویژگی Clip path Project 3 :New Year text animation using clip path property

• انیمیشن متن سال نو با ویژگی Clip path بخش دوم New Year text animation using clip path property Part 2

• پروژه ۴: افکت Hover خلاقانه دکمه با Clip path Project 4 : creative button hover effect using CSS clip path property

• پروژه ۵: افکت Split منو با Clip path Project 5 : creative menu split effect using CSS clip path

پس‌زمینه متحرک با CSS خالص Pure CSS Animated Background

• پس‌زمینه متحرک با CSS خالص Pure CSS Animated Background

• ساخت Keyframe برای انیمیشن creating keyframe for animation

• تغییر موقعیت و اندازه المان‌های Box change position and size of box elements

جاوااسکریپت DOM برای انیمیشن Javascript DOM for Animation

• آموزش مقدماتی JavaScript DOM JavaScript DOM Introduction Tutorial

• آموزش متدهای هدف‌گذاری (Targeting) در DOM JavaScript DOM Targeting Methods Tutorial

• آموزش متدهای هدف‌گذاری در DOM بخش دوم JavaScript DOM Targeting Methods Tutorial part two

• آموزش متدهای Get در DOM JavaScript DOM Get Methods Tutorial

• آموزش متدهای Set در DOM JavaScript DOM Set Methods Tutorial

• آموزش querySelector و querySelectorAll JavaScript DOM querySelector & querySelectorAll Tutorial

• آموزش متدهای استایل‌دهی CSS در DOM JavaScript DOM CSS Styling Methods Tutorial

• آموزش متد addEventListener JavaScript addEventListener Method Tutorial

• آموزش متد addEventListener بخش دوم JavaScript addEventListener Method Tutorial part two

• آموزش متدهای classList JavaScript classList Methods Tutorial

• آموزش setInterval و clearInterval JavaScript setInterval & clearInterval Tutorial

• آموزش setTimeout و clearTimeout JavaScript setTimeout & clearTimeout Tutorial

پروژه ۱۰ انیمیشن با جاوااسکریپت 10 Javascript Animation Project

• پروژه‌های انیمیشن JS Js Animation Projects

• پروژه ۱: انیمیشن متن جاوااسکریپت با افکت درخشش بخش اول Project 1 : JavaScript text animation with glowing effect part 1

• پروژه ۱: انیمیشن متن جاوااسکریپت با افکت درخشش بخش دوم Project 1 : JavaScript text animation with glowing effect part 2

• پروژه ۲: افکت Parallax وب‌سایت بخش اول Project 2: Website parallax Effect part 1

• پروژه ۲: افکت Parallax وب‌سایت بخش دوم Project 2 : Website parallax Effect part 2

• پروژه ۳: چشم‌های متحرک دنبال‌کننده مکان‌نما Project 3 : Animated Eyes Follow Mouse Cursor

• پروژه ۴: افزودن جاوااسکریپت به چشم‌های متحرک Project 4 : Animated Eyes Follow Mouse Cursor adding javascript

• پروژه ۵: انیمیشن متن رنگی Project 5 : colorful text animation

• پروژه ۶: انیمیشن Clip Path با جاوااسکریپت بخش اول Project 6 : Clip-Path animation using JavaScript Part 1

• پروژه ۶: انیمیشن Clip Path با جاوااسکریپت بخش دوم Project 6 : Clip-Path animation using JavaScript Part 2

• پروژه ۷: انیمیشن Scroll Trigger بخش اول Project 7 : scroll Trigger animation part 1

• انیمیشن Scroll Trigger بخش دوم scroll Trigger animation part 2

• انیمیشن Scroll Trigger بخش سوم scroll Trigger animation part 3

• پروژه ۸: انیمیشن ستاره چشمک‌زن با JS بخش اول Project 8 : blinking star animation using JavaScript part 1

• انیمیشن ستاره چشمک‌زن با JS بخش دوم blinking star animation using JavaScript part 2

• پروژه ۹: انیمیشن جاده در حالت روز و شب بخش اول Project 9 : Day mode night mode Road animation part 1

• انیمیشن جاده در حالت روز و شب بخش دوم Day mode night mode Road animation part 2

• پروژه ۱۰: منوی ناوبری دایره‌ای با جاوااسکریپت Project 10 : circular navigation menu using javascript

• منوی ناوبری دایره‌ای با جاوااسکریپت بخش دوم circular navigation menu using javascript part 2

انیمیشن SVG SVG Animation

• به‌کارگیری SVG در HTML Include SVG in HTML

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

• آموزش المان SVG Line SVG Line Element Tutorial

• آموزش المان SVG Rect SVG Rect Element Tutorial

• آموزش المان SVG Circle SVG Circle Element Tutorial

• آموزش المان SVG Ellipse SVG Ellipse Element Tutorial

• آموزش المان SVG Polyline SVG Polyline Element Tutorial

• آموزش المان SVG Polygon SVG Polygon Element Tutorial

• آموزش المان SVG Path SVG Path Element Tutorial

• آموزش المان SVG Path بخش دوم SVG Path Element Tutorial part 2

• آموزش المان SVG Path بخش سوم SVG Path Element Tutorial - part 3

• آموزش المان SVG Text SVG Text Element Tutorial

• آموزش المان SVG Image SVG Image Element Tutorial

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

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

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

• المان‌های SVG Defs, Symbol و Use SVG Defs, Symbol & Use Elements

• آموزش المان SVG TextPath SVG TextPath Element Tutorial

• گرادینت‌های خطی (Linear Gradients) در SVG SVG linear Gradients

• گرادینت‌های شعاعی (Radial Gradients) در SVG SVG radial Gradients

• تبدیل Adobe Illustrator به SVG adobe illustrator to svg

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

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

فیلترهای SVG SVG Filters

• فیلتر SVG چیست؟ what is SVG filter

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

• فیلتر SVG feColorMatrix SVG feColorMatrix Filter

• آموزش feComponentTransfer feComponentTransfer

• فیلتر SVG feComposite SVG feComposite Filter

• فیلتر SVG feConvolveMatrix SVG feConvolveMatrix Filter

• فیلتر SVG feDiffuseLighting SVG feDiffuseLighting Filter

• فیلتر SVG feDisplacementMap SVG feDisplacementMap Filter

• فیلتر SVG feTurbulence SVG feTurbulence Filter

پروژه ۱۱ انیمیشن SVG 11 SVG Animation Project

• پروژه ۱: انیمیشن ردیابی مسیر SVG Project 1 : SVG path tracking animation

• پروژه ۲: انیمیشن سریع لودر SVG Project 2 : Quick SVG Loader Animation

• پروژه ۳: انیمیشن پیچش عنوان SVG Project 3 : svg title wrapping animation

• پروژه ۴: انیمیشن Hover سه بعدی project 4 : 3D Hover Animation

• پروژه ۵: انیمیشن متن موجی SVG Project 5 : svg Wavy text animation

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

• پروژه ۷: ترسیم SVG هنگام اسکرول Project 7 : SVG Scroll Drawing

• پروژه ۸: انیمیشن پیوند دوباره نقشه SVG Project 8 : SVG map reuniting animation

• پروژه ۹: تلاطم و جابجایی تصویر بخش اول Project 9 : Image Turbulence & Displacement Part 1

• تلاطم و جابجایی تصویر بخش دوم Image Turbulence & Displacement Part 2

• پروژه ۱۰: تغییر رنگ Fill در SVG Project 10: Svg Fill Switching

• پروژه ۱۱: انیمیشن پرتاب راکت SVG Projrct 11: SVG Rocket Lunch Animation

• پروژه ۱۲: ساعت آنالوگ واقعی با SVG و JS Project 12 : Real-Time Analog Clock Using SVG & JavaScript

• ساعت آنالوگ واقعی با SVG و JS بخش دوم Real-Time Analog Clock Using SVG & JavaScript part 2

انیمیشن GSAP GSAP Animation

• مقدمه و پیاده‌سازی انیمیشن GSAP introduction and implementation GSAP animation

• ویژگی‌ها و متدهای انیمیشن GSAP GSAP animation properties and method

• Timeline در GSAP: ساخت اولین Timeline Timeline in GSAP Create Your First Timeline

• استفاده از ScrollTrigger Use ScrollTrigger

• انیمیشن‌های متعدد و Scrub در Scroll Trigger scroll Trigger multiple animation and scrub

• استفاده از Pin در Scroll Trigger scroll Trigger with pin

• ساخت انیمیشن‌های جذاب SVG بخش اول Create Slick SVG Animations part 1

• ساخت انیمیشن‌های جذاب SVG بخش دوم Create Slick SVG Animations part 2

• ساخت انیمیشن‌های جذاب SVG بخش سوم Create Slick SVG Animations part 3

پروژه ۶ انیمیشن GSAP 6 GSAP Animation Project

• پروژه ۱: ساخت انیمیشن مکان‌نمای سفارشی بخش اول Project 1 : Buld a Custom Cursor animation part 1

• پروژه ۱: ساخت انیمیشن مکان‌نمای سفارشی بخش دوم Project 1 : Buld a Custom Cursor animation part 2

• پروژه ۲: طراحی Timeline متحرک Project 2: Create Animated Timeline Designs

• پروژه ۳: ساخت انیمیشن‌های متن خیره‌کننده با GSAP بخش اول Project 3:Create Stunning Text Animations with GSAP Part 1

• پروژه ۳: ساخت انیمیشن‌های متن خیره‌کننده با GSAP بخش دوم Project 3:Create Stunning Text Animations with GSAP part 2

• پروژه ۴: ساخت انیمیشن‌های متن اسکرولی با GSAP Project 4:Create Scrolling Text Animations with GSAP

• پروژه ۴: ساخت انیمیشن‌های متن اسکرولی با GSAP بخش دوم Project 4:Create Scrolling Text Animations with GSAP part 2

• پروژه ۵: انیمیشن تغییر شکل (Morphing) اشکال SVG بخش اول Project 5 : SVG Shape Morphing Animation part 1

• پروژه ۵: انیمیشن تغییر شکل (Morphing) اشکال SVG بخش دوم Project 5 : SVG Shape Morphing Animation part 2

• پروژه ۶: ساخت وب‌سایت متحرک با GSAP ۱ Project 6: Build an Animated Website with GSAP 1

• پروژه ۶: ساخت وب‌سایت متحرک با GSAP ۲ Project 6: Build an Animated Website with GSAP 2

• پروژه ۶: چیدمان لوگو و گرافیک Project 6 : arrange the logo and the graphic

• پروژه ۶: شروع طراحی بخش خدمات (Services) Project 6 : start designing the service section

• پروژه ۶: استایل‌دهی به بلوک خدمات Project 6 : styling the services block

• پروژه ۶: اعمال انیمیشن GSAP به بخش اول Project 6: apply GSAP animation to Section 1

• پروژه ۶: اعمال Scroll Trigger به خدمات Project 6 : apply scroll trigger to services

• پروژه ۶: متحرک‌سازی المان‌های باکس در کنار هم Project 6 : animate the box elements side by side