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

دانلود CSS & Web Animation: Complete Guide with 70 Projects

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره: تسلط بر CSS Transitions، Keyframes، SVG، JavaScript و GSAP با ۷۰ پروژه واقعی. آموزش CSS Transitions و نحوه ایجاد انیمیشن‌های نرم و ظریف برای حالت‌های Hover و تغییر وضعیت. کار با CSS Keyframe Animations برای ساخت افکت‌های جذاب مبتنی بر خط زمانی (Timeline). انیمیشن‌های کامل SVG شامل فیلترها، Strokeها و مسیرهای حرکتی (Motion Paths). انیمیشن‌های JavaScript DOM برای پویا کردن و تعاملی ساخت انیمیشن‌ها. و در نهایت، بررسی قدرت کامل GSAP (پلتفرم انیمیشن GreenSock) که یکی از قدرتمندترین کتابخانه‌های انیمیشن مورد استفاده متخصصان در سراسر جهان است. پروژه‌های Hover و Transition در CSS نمونه‌های انیمیشن Keyframe پروژه‌های انیمیشن تعاملی SVG کامپوننت‌های انیمیشنی مبتنی بر جاوااسکریپت و پروژه‌های حرفه‌ای و کامل با GSAP پیش نیازها: درک پایه از HTML و CSS یک مرورگر مدرن (مانند Chrome، Firefox یا Edge) یک ویرایشگر کد – پیشنهاد من Visual Studio Code است که رایگان و کاربرپسند است اشتیاق به یادگیری و آزمایش ایده‌های خلاقانه!

سلام و به کامل‌ترین و پیشرفته‌ترین دوره انیمیشن CSS خوش آمدید!

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

در این دوره، ما عمیقاً وارد تمام حوزه‌های اصلی انیمیشن CSS می‌شویم:

  • CSS Transitions و نحوه ایجاد انیمیشن‌های نرم و ظریف برای Hover و تغییر وضعیت.

  • CSS Keyframe Animations برای ساخت افکت‌های جذاب و مبتنی بر زمان.

  • انیمیشن‌های کامل SVG شامل فیلترها، خطوط و مسیرهای حرکتی.

  • انیمیشن‌های JavaScript DOM برای تبدیل انیمیشن‌ها به المان‌های پویا و تعاملی.

  • و البته، بررسی قدرت کامل GSAP، پلتفرم انیمیشن GreenSock که یکی از قدرتمندترین کتابخانه‌های انیمیشن در دنیاست.

اما این تمام ماجرا نیست؛ این دوره مملو از ده‌ها پروژه واقعی است، از جمله:

  • پروژه‌های Hover و Transition در CSS

  • نمونه‌های انیمیشن Keyframe

  • پروژه‌های انیمیشن تعاملی SVG

  • کامپوننت‌های انیمیشنی با قدرت جاوااسکریپت

  • و پروژه‌های حرفه‌ای GSAP

با بیش از ۲۴ ساعت محتوای باکیفیت، صدها منبع قابل دانلود و راهنمایی گام‌به‌گام، این دوره طراحی شده تا شما را از مفاهیم پایه تا تسلط کامل بر انیمیشن برساند.

پس، آیا آماده‌اید به صفحات وب خود جان ببخشید و انیمیشن‌هایی بسازید که واقعاً متمایز باشند؟

بیایید این سفر خلاقانه را آغاز کنیم و با هم پتانسیل کامل انیمیشن 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

نمایش نظرات

آموزش جامع انیمیشن CSS و وب: راهنمای کامل با ۷۰ پروژه عملی
جزییات دوره
28 hours
174
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
248
4.7 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Jayanta Sarkar Jayanta Sarkar

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

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

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