آموزش انیمیشن CSS، انیمیشن جاوااسکریپت و Tailwind برای طراحی وب - آخرین آپدیت

دانلود CSS Animation, Javascript Animation, Tailwind for Web Design

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره: یاد بگیرید چگونه اجزای وب را متحرک کرده و وب‌سایت‌های تعاملی را با استفاده از HTML، CSS، Javascript، Tailwind و Python طراحی کنید. مبانی پایه انیمیشن وب، از جمله موارد استفاده، محدودیت‌های فنی و انواع مختلف انیمیشن‌ها را بیاموزید. آموزش ساخت انیمیشن متن با CSS آموزش ساخت انیمیشن دکمه با CSS آموزش ساخت انیمیشن منوی کشویی (Dropdown) با CSS آموزش ایجاد انتقال رنگ پس‌زمینه گرادینت با CSS آموزش ساخت انیمیشن‌های شناور (Floating) و جهشی (Bouncing) با CSS آموزش ساخت انیمیشن‌های چرخش و زوم با CSS آموزش ساخت انیمیشن تایمر شمارشی معکوس با Javascript آموزش ساخت انیمیشن مکان‌نما (Cursor) با Javascript آموزش ساخت انیمیشن‌های ایزومتریک رنگارنگ با Javascript آموزش طراحی صفحه رزرو پرواز با Tailwind CSS آموزش طراحی صفحه قیمت‌گذاری با Tailwind CSS آموزش ساخت انیمیشن Loading Spinner با پایتون و Turtle آموزش ساخت انیمیشن پس‌زمینه با پایتون و Turtle آموزش متحرک‌سازی بصری‌سازی داده‌ها با D3 JS آموزش طراحی و متحرک‌سازی صفحه محصول فروشگاه اینترنتی با CSS پیش نیازها: بدون نیاز به تجربه قبلی در انیمیشن CSS دانش پایه در جاوااسکریپت

به دوره آموزش انیمیشن CSS، انیمیشن جاوااسکریپت و Tailwind برای طراحی وب خوش آمدید. این یک آموزش جامع برای طراحان و توسعه‌دهندگان وب است که علاقه‌مند به متحرک‌سازی اجزای وب و طراحی وب‌سایت‌های تعاملی با استفاده از HTML، CSS، Javascript، Tailwind و Python هستند. این دوره ترکیبی ایده‌آل از انیمیشن و طراحی وب است و فرصتی عالی برای تقویت مهارت‌های برنامه‌نویسی در حین ارتقای دانش فنی در توسعه وب فراهم می‌کند. در جلسه معرفی، با مبانی پایه انیمیشن وب، موارد کاربرد، محدودیت‌های فنی و انواع رایج انیمیشن‌ها در طراحی وب آشنا خواهید شد. سپس در بخش‌های بعدی، پروژه‌ها را آغاز می‌کنیم. در بخش اول، با آموزش‌های انیمیشن CSS شروع می‌کنیم و انواع انیمیشن‌ها مانند انیمیشن متن، شناور، جهشی، چرخان، زوم، انیمیشن دکمه، تغییر رنگ گرادینت پس‌زمینه و منوی کشویی را می‌سازیم. این بخش پایه محکمی برای استفاده از CSS جهت جذاب‌تر و تعاملی‌تر کردن عناصر وب به شما می‌دهد. پس از آن، در بخش دوم، اجزای وب را با استفاده از Javascript و Anime JS متحرک می‌کنیم؛ از جمله ساخت یک تایمر شمارشی معکوس کاملاً متحرک، یک مکان‌نمای متحرک با افکت حباب شناور و انیمیشن‌های ایزومتریک رنگارنگ. این بخش به شما می‌آموزد چگونه جاوااسکریپت را با کتابخانه‌های انیمیشن ترکیب کنید تا تعاملاتی روان، واکنش‌گرا و جذاب طراحی کنید که تجربه کاربری را ارتقا دهد. در بخش سوم، وب‌سایت‌های تعاملی را با Tailwind CSS طراحی می‌کنیم، به ویژه طراحی و متحرک‌سازی صفحات رزرو پرواز و صفحات قیمت‌گذاری که شامل ترنزیشن‌های Hover، دکمه‌های متحرک و طراحی ریسپانسیو است. در بخش چهارم، انیمیشن‌های زیبایی را با Python و Turtle می‌سازیم، از جمله انیمیشن Loading Spinner رنگی و انیمیشن رشد درخت که می‌تواند به عنوان المان تزئینی پس‌زمینه وب استفاده شود. سپس در بخش پنجم، بصری‌سازی داده‌ها را با D3 JS متحرک می‌کنیم و یک نمودار میله‌ای برای نمایش رشد جمعیت یک شهر در ۱۰ سال اخیر با ترنزیشن‌های متحرک و رندرینگ پویا می‌سازیم. در نهایت، در پایان دوره، یک صفحه محصول فروشگاه اینترنتی را طراحی می‌کنیم که شامل انیمیشن‌های کارت‌های چرخان (Flipping Cards) است؛ به طوری که روی کارت تصویر و عنوان محصول و پشت آن توضیحات و قیمت نمایش داده شود، همچنین یک دکمه متحرک «افزودن به سبد خرید» را خواهیم ساخت.

قبل از شروع دوره، باید بپرسیم چرا باید انیمیشن‌های وب را یاد بگیریم؟ پاسخ من این است: انیمیشن‌ها نقش حیاتی در طراحی وب مدرن دارند. آن‌ها به هدایت توجه کاربر کمک کرده، تعامل را افزایش می‌دهند و باعث می‌شوند وب‌سایت‌ها پویا و جذاب‌تر به نظر برسند. انیمیشن نه تنها جذابیت بصری را افزایش می‌دهد، بلکه احساس و شخصیت به تجربه‌های دیجیتال می‌بخشد و آن‌ها را ماندگارتر می‌کند. علاوه بر این، از دیدگاه تجاری، داشتن یک وب‌سایت کاملاً متحرک می‌تواند هویت برند را تقویت کرده و نرخ تبدیل (Conversion Rate) را افزایش دهد.

در ادامه، مواردی که در این دوره خواهید آموخت آورده شده است:

  • یادگیری مبانی پایه انیمیشن وب، موارد استفاده، محدودیت‌های فنی و انواع انیمیشن‌ها

  • آموزش ساخت انیمیشن متن با CSS

  • آموزش ساخت انیمیشن دکمه با CSS

  • آموزش ساخت انیمیشن منوی کشویی با CSS

  • آموزش ایجاد انتقال رنگ پس‌زمینه گرادینت با CSS

  • آموزش ساخت انیمیشن‌های شناور و جهشی با CSS

  • آموزش ساخت انیمیشن‌های چرخش و زوم با CSS

  • آموزش ساخت انیمیشن تایمر شمارشی معکوس با Javascript

  • آموزش ساخت انیمیشن مکان‌نما با Javascript

  • آموزش ساخت انیمیشن ایزومتریک رنگارنگ با Javascript

  • آموزش طراحی صفحه رزرو پرواز با Tailwind CSS

  • آموزش طراحی صفحه قیمت‌گذاری با Tailwind CSS

  • آموزش ساخت انیمیشن Loading Spinner با پایتون و Turtle

  • آموزش ساخت انیمیشن پس‌زمینه با پایتون و Turtle

  • آموزش متحرک‌سازی بصری‌سازی داده‌ها با D3 JS

  • آموزش طراحی و متحرک‌سازی صفحه محصول فروشگاه اینترنتی با CSS


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

معرفی دوره Introduction to the Course

  • مقدمه Introduction

  • سرفصل‌های course Table of Contents

  • این دوره برای چه کسانی است؟ Whom This Course is Intended for?

ابزارها و منابع Tools & Resources

  • ابزارها و منابع Tools & Resources

آشنایی با انیمیشن وب Introduction to Web Animation

  • مقدمه‌ای بر انیمیشن وب Introduction to Web Animation

ساخت انیمیشن متن با CSS Creating Text Animation with CSS

  • ساخت انیمیشن متن با CSS Creating Text Animation with CSS

ساخت انیمیشن دکمه با CSS Creating Button Animation with CSS

  • ساخت انیمیشن دکمه با CSS Creating Button Animation with CSS

ساخت انیمیشن منوی کشویی با CSS Creating Dropdown Menu Animation with CSS

  • ساخت انیمیشن منوی کشویی با CSS Creating Dropdown Menu Animation with CSS

ساخت ترنزیشن رنگ گرادینت پس‌زمینه با CSS Creating Gradient Background Colour Transition with CSS

  • ساخت ترنزیشن رنگ گرادینت پس‌زمینه با CSS Creating Gradient Background Colour Transition with CSS

ساخت انیمیشن‌های شناور و جهشی با CSS Creating Floating & Bouncing Animations with CSS

  • ساخت انیمیشن‌های شناور و جهشی با CSS Creating Floating & Bouncing Animations with CSS

ساخت انیمیشن‌های چرخش و زوم با CSS Creating Rotate & Zoom In Animations with CSS

  • ساخت انیمیشن‌های چرخش و زوم با CSS Creating Rotate & Zoom In Animations with CSS

ساخت و متحرک‌سازی تایمر شمارش معکوس با جاوااسکریپت Creating & Animating Countdown Timer with Javascript

  • ساخت و متحرک‌سازی تایمر شمارش معکوس با جاوااسکریپت Creating & Animating Countdown Timer with Javascript

ساخت انیمیشن مکان‌نما با جاوااسکریپت Creating Cursor Animation with Javascript

  • ساخت انیمیشن مکان‌نما با جاوااسکریپت Creating Cursor Animation with Javascript

ساخت انیمیشن ایزومتریک رنگارنگ با جاوااسکریپت Creating Colourful Isometric Animation with Javascript

  • ساخت انیمیشن ایزومتریک رنگارنگ با جاوااسکریپت Creating Colourful Isometric Animation with Javascript

طراحی صفحه رزرو پرواز با Tailwind CSS Designing Flight Booking Page with Tailwind CSS

  • طراحی صفحه رزرو پرواز با Tailwind CSS Designing Flight Booking Page with Tailwind CSS

طراحی صفحه قیمت‌گذاری با Tailwind CSS Designing Pricing Page with Tailwind CSS

  • طراحی صفحه قیمت‌گذاری با Tailwind CSS Designing Pricing Page with Tailwind CSS

ساخت انیمیشن لودینگ اسپینر با پایتون و Turtle Creating Loading Spinner Animation with Python & Turtle

  • ساخت انیمیشن لودینگ اسپینر با پایتون و Turtle Creating Loading Spinner Animation with Python & Turtle

ساخت انیمیشن پس‌زمینه با پایتون و Turtle Creating Background Animation with Python & Turtle

  • ساخت انیمیشن پس‌زمینه با پایتون و Turtle Creating Background Animation with Python & Turtle

متحرک‌سازی بصری‌سازی داده‌ها با D3 JS Animating Data Visualization with D3 JS

  • متحرک‌سازی بصری‌سازی داده‌ها با D3 JS Animating Data Visualization with D3 JS

طراحی و متحرک‌سازی صفحه محصول فروشگاه با CSS Designing & Animating E-Commerce Product Page with CSS

  • طراحی و متحرک‌سازی صفحه محصول فروشگاه با CSS Designing & Animating E-Commerce Product Page with CSS

ساخت دکمه تغییر حالت تاریک و روشن (Dark/Light Mode) Creating Dark & Light Mode Toggle Switch Button

  • ساخت دکمه تغییر حالت تاریک و روشن Creating Dark & Light Mode Toggle Switch Button

جمع‌بندی و نتیجه‌گیری Conclusion & Summary

  • جمع‌بندی و نتیجه‌گیری Conclusion & Summary

نمایش نظرات

آموزش انیمیشن CSS، انیمیشن جاوااسکریپت و Tailwind برای طراحی وب
جزییات دوره
3.5 hours
22
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
3,099
4.5 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Christ Raharja Christ Raharja

مشاور سابق ریسک فناوری و علاقه‌مند به تجارت الکترونیک